为什么要做移动端适配？
在企业生产中，设计师往往会以 640px 的标准尺寸输出视觉稿，但是实际设备宽度不一定是 640px，所以如果只按照视觉稿标注的 px 去实现，就会出现不同宽度设备下的大小样式问题。
适配方案
流式布局
流式布局通常会通过百分比来定义宽度，通过固定 px 值设置高度，大屏幕下有些元素宽度被拉的很长，但高度不变，所以会出现拉伸的情况。
固定宽度
有些项目为了减少前端和设计师的工作量，统一按照 320px 宽度去设计与实现，空出的地方直接留白。
响应式
pc 端网页和移动端代码一套，在代码里判断是移动端还是网页，代码耦合严重和维护比较复杂。
一般都是中小型的门户或者博客类站点这样做，大型网站不建议这样。
设置 viewport 进行缩放
以 320 宽度为基准，进行缩放，最大缩放为 320*1.3 = 416，基本缩放到 416 都就可以兼容 iphone6 plus 的屏幕了，这个方法简单粗暴，又高效。
但会导致有些页面元素会糊的情况。
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86">
rem
rem（font size of the root element）是指相对于根元素的字体大小的单位。
html{
font-size:20px;
}
.btn {
width: 6rem;
height: 3rem;
line-height: 3rem;
font-size: 1.2rem;
display: inline-block;
background: #06c;
color: #fff;
border-radius: .5rem;
text-decoration: none;
text-align: center;
}
一般的做法是：
拿到标准尺寸 640px 的视觉稿，设置 640px 的根元素 font-size 为 20 px,计算此时其他元素的大小（以 rem 为单位）。
通过 js 获取设备宽度后，以 640px 为基准，动态设置 html 根元素的字体大小。
<script type="text/javascript">
window.addEventListener(('orientationchange' in window ? 'orientationchange' : 'resize'), (function() {
function c() {
var d = document.documentElement;
var cw = d.clientWidth || 750;
d.style.fontSize = (20 * (cw / 375)) > 40 ? 40 + 'px' : (20 * (cw / 375)) + 'px';
}
c();
return c;
})(), false);
</script>
当然，也可以通过媒体查询去设置 font-size，但是只能覆盖主流设备：
html {
font-size : 20px;
}
@media only screen and (min-width: 401px){
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px){
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px){
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px){
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px){
html {
font-size: 40px !important;
}
}
