移动端适配

移动端适配的方案

通过Meida queries（媒体查询）的方式
以天猫首页为代表的 flex弹性布局
以淘宝首页为代表的 rem + viewport缩放

rem方式

媒体查询

它主要是通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。核心语法是：

@media 媒体类型 and (媒体特性){
    // css 代码
}
媒体类型：
    screen     ====>  用于电脑显示屏
    print      ====>  用于打印机 
    projection ====>  用于方案展示，比如幻灯片
    ...
媒体特性：
    max-width
    max-height
    ...

例如：

@media screen and (max-width:320px) {
    /* 屏幕宽度小于320px时候 */
}
@media screen and (min-width:321px) and (max-width:375px){
    /* 屏幕宽度大于等于321px时候代码生效 */
}

flex 方式

以天猫的实现方式进行说明：
它的viewport是固定的：<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">高度定死，宽度自适应，元素都采用px做单位。
随着屏幕宽度变化，页面也会跟着变化，效果就和PC页面的流体布局差不多，在哪个宽度需要调整的时候使用响应式布局调调就行（比如网易新闻），这样就实现了适配。

rem + viewport 缩放

这也是淘宝使用的方案，根据屏幕宽度设定 rem 值，需要适配的元素都使用 rem 为单位，不需要适配的元素还是使用 px 为单位。（1em = 16px）

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？
区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。比如：p{font-size:14px;font-size:0.875rem;}
(推荐一个单位转换的工具：http://pxtoem.com/)

rem 方式

为什么html的字体大小设置为font-size:625%

浏览器默认字体大小是16px，rem与px关系为：1rem = 10px，10/16=0.625=62.5%，当设计稿和屏幕一样大的情况下（如750px），只要将设计稿中量到的px尺寸除以10就得到了相应的rem尺寸，例如：100px = 10rem，120px = 12rem。但是在项目中设置成 font-size: 62.5% 在大部分现代浏览器都没有问题，在谷歌浏览器可能会出现问题，因为chrome不支持小于12px的字体，最小就是12px，计算小于10px的时候，会默认取12px去计算，导致chrome的em/rem计算不准确。谷歌font-size:62.5%刚好是10像素，而谷歌是不支持小于12像素的字体的，所以，谷歌无形当中将所有的rem全部变大了。chrome在字体小于12px时都当12px 处理，也就是设置62.5%相当于设置成了75.0%。但是在除的时候又是除的10得到rem值，就会有问题了
针对这个现象，可以尝试设置html字体为625%，即100px，body修正设置为16px，这样 0.1rem 就是 10px，而body的字体仍然是默认大小，不影响未设置大小的元素的默认字体的大小。

JS动态修改配合rem适配

// 计算屏幕宽度
let W = document.documentElement.clientWidth || document.body.clientWidth

// 获取html根标签
let HTMLDOM = document.getElementsByTagName('html')[0]

// 设置根元素字体大小
HTMLDOM.style.fontSize = W / 10 +'px'