[分享]css3手机屏幕宽度自适应

CSS3是最新的CSS版本，包含了很多新的样式和特效，其中包括手机屏幕宽度自适应。media screen and (maxwidth: 767px) { / 在这里编写手机屏幕的样式 / } 其中，...

CSS3是最新的CSS版本，包含了很多新的样式和特效，其中包括手机屏幕宽度自适应。

@media screen and (max-width: 767px) {
  /* 在这里编写手机屏幕的样式 */
} 

其中，@media是一个CSS3的媒体查询方式，用于针对不同媒体类型和尺寸设置不同的样式。在这个例子中，我们使用了screen和max-width属性，表示屏幕类型为电脑屏幕，最大宽度为767px。

接下来，在{}中编写适合手机屏幕的样式。例如，可以设置元素的宽度为100%、字号为较小的14px、和适当的行高等等。这样就可以让页面在不同尺寸的屏幕上自适应。

@media screen and (max-width: 767px) {
  body {
    font-size: 14px;
    line-height: 1.5;
  }
  .container {
    width: 100%;
  }
} 

总结一下，使用CSS3的@media查询可以轻松实现手机屏幕宽度的自适应，让页面在不同尺寸的屏幕上都有良好的浏览体验。