移动端适配

h5上面现在需要做到各种类型手机的适配：现在主流的几种方式如下：

1.百分百适配移动端 （ 不美观 不完美）

2.媒体查询（有点大材小用）

3.rem单位，设置根节点的大小

a.不引入淘宝适配
核心是要用到scss的function功能，以及给document元素的DOMContentLoaded事件添加一个事件处理程序，动态计算根节点font-size。
我们需要一个屏幕尺寸来作为参考标准，我们以iphone6为标准 375*667，创建一个.scss

@function px2rem($px){
    $rem: 37.5px;
    @return ($px/$rem) + rem;
}
.box{
    width: px2rem(375px);
    height: px2rem(100px);
    background: #b0b0b0;
    border-bottom: 1px solid red;
}

声明了一个px2rem的函数，$rem变量叫做rem基准值，也是根元素的font-size。这里是根据375/10计算来的，除以10是方便计算。设计稿一般会放大2倍(这个根据设备的dpr)，所以我们在样式里的宽度要除2，比如设计稿中的box元素是全屏宽750px，那么样式中box的宽度就要设置为375px。接着再创建一个adjust.js文件

var dpr = window.devicePixelRatio;
document.addEventListener('DOMContentLoaded', () => {
    document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';})

这里是动态设置html元素的font-size，注意这里除10，是和之前$rem那里关联的。如果那里设置3.75，那么这里就要除以100，这样就可以适配i5和i6，但是如果手机的dpr不是2的话，如何处置？

通过window.devicePixelRatio可以获取到设备的dpr

/* 动态设置fontSize */
var dpr = window.devicePixelRatio;
document.addEventListener('DOMContentLoaded', () => {
    document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';
})
document.getElementsByTagName('meta')['viewport'].setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no,width = device-width');

.scss也做对应的修改

@function px2rem($px){
    $rem: 75px;
    @return ($px/$rem) + rem;
}
.box{
    width: px2rem(750px);
    height: px2rem(100px);
    background: #b0b0b0;
    border-bottom: 1px solid red;
}

大功告成！
b.直接使用淘宝适配

4.vw 相当于屏幕宽度的1%