移动端的适配要分为三点来讨论：
使用viewport
媒体查询
动态rem方案
一、使用viewport
也就是使用<meta name='viewport>，用来让开发者控制视口尺寸以及比例。
一个典型的使用：<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- width属性：可以使用width=600来控制，或者设为device-width这一特殊值来指代比例为100%时屏幕宽度的CSS像素数值。或者设为device-width这一特殊值来指代比例为100%时屏幕宽度的CSS像素数值。（相应有height及device-height属性，可能对包含基于视口高度调整大小及位置的元素的页面有用。）
- user-scalable=no：禁止缩放
- initial-scale属性控制页面最初加载时的缩放等级
- maximum-scale、minimum-scale及user-scalable属性控制允许用户以怎样的方式放大或缩小页面
二、媒体查询
使用媒体查询，一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。
例：
<style>
@media (max-width: 320px) {
body{background: red;}
}
@media (min-width: 321px) and (max-width: 375px) {
body{background: green;}
}
@media (min-width: 376px) and (max-width: 425px) {
body{background: black;}
}
@media (min-width: 426px) and (max-width: 768px) {
body{background: orange;}
}
@media (min-width: 769px){
body{background: blue;}
}
</style>
三、动态rem方案
手机专用的自适应方案
什么是rem.
我们之前用到的px指像素，em指一个汉字的宽度，vh就是view height, 100vh==视口高度，vw就是view width, 100vw==视口宽度
那么什么是rem。（详细看mdn）
rem是 root em ，根元素的font-size。根元素是什么，就是html。实际上就是指html的font-size.
网页上的字体大小默认是16px；
但是如果chrome的最小字号是12px，那么不能设置为更小；
REM和EM的区别
两个就不是一个东西，REM是根元素的font-size，EM是自己的font-size。
手机端方案的特点
手机上无法做响应式的布局，那么如何解决呢？
１．百分比布局。难点在于高度很难写，因为宽度就不确定啊，比如宽高2:1，就没法写，写height: 20%根本不行。
看例子：http://js.jirengu.com/kohuh/1/edit
２．整体缩放
rem方案，解决宽度和高度没有关联的问题。
一切单位以宽度为基准，就能保证完美还原设计稿。
但是一切单位都与宽度没啥关系，vw有点关系，但是兼容性太差了。那么这里退而且其次，使用rem，我们知道rem是以html的font-size为基准的，那么我们用js操作，让其等于页面宽度就可以，这样rem就与page width有关系啦～这样操作：
<script>
var pageWidth = window.innerWidth
document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
</script>
http://js.jirengu.com/tatim/3/edit?html,css
可以让一个rem，等于页面宽度的1/10，方便书写。
当需要特别小的时候，或者字体的问题，直接使用px，因为最小就是1px，更小也没啥用了。
用的时候一定要注意，chrome最小字体为12的原则，因为屏幕一旦太小，可能font-size就小于12，就gg了
网友评论