移动端如何适配（响应式）

meta viewport

使用此标签就是为了告诉浏览器你别给我乱缩放，按我的标准来。

1	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0" >

viewport mata标签的每一对name/value都是一条指令。总共有6条指令：

width：用来设置layout viewport的宽度.
initial-scale：用来设置页面的初始缩放值以及layout viewport的宽度。
minimum-scale：用来设置允许的最小缩放值(例如，用户可以缩小至什么程度)。
maximum-scale：用来设置允许的最大缩放值(例如，用户可以放大至什么程度)。
height：期望用于设置layout viewport的高度。但一直没被支持。
user-scalable：当设置为no时，则禁止用户进行缩放。

媒体查询

同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。就比如

@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
}

根据不同设备的宽度来进行 css 的选择，但是看各大网站选择响应式布局的其实是不多的，在新闻和博客上的应用要较多一点，应该是选择 css 不如直接重写一个。

动态 REM

MDN 上写道

这个单位代表根元素的 font-size 大小（例如 <html> 元素的font-size）。

个人总结：rem 大小看的是在<html>的 font-size（root em），而 em 大小看的是在所处标签的 font-size，两者没啥必然联系，一个 em 的大小一般就是一个字的大小或则是M的大小。

动态 REM 是在移动端才会用到的，我们希望我们的设计稿在不同分辨率的移动设备上得到的展示效果是一样的。那么就要求我们使用的 <length> 可以自动识别设备宽度并进行缩放。一般的做法就是引入一段 javaScript 这样子来获取设备的宽度并进行对 <html> 的 font-size 的设置

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script>
    var pageWidth = window.innerWidth
    document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
</script>

这个时候我们再去使用 1rem 他就代表整个页面的宽度，他会根据不同的页面宽度来调整自己的值，这样设计稿就不会失真了。

meta viewport

媒体查询

动态 REM

参考资料