移动端适配，适合自己才是最好的

一、初次遇见

在使用rem方式适配，遇见过两个基准值

• 一个是以375px为基础，根元素字体大小为20px，其余尺寸等比例缩放，即根元素字体大小与屏幕宽度比例为20/375。（jQuery.weui方案）
• 一个是以375px为基础，根元素字体大小为37.5px，其余尺寸等比例缩放，即根元素字体大小与屏幕宽度比例为1/10。（flexible.js方案）

二、结合设计稿、SASS

一般设计师给出来的设计稿大小是实际大小的两倍，以iPhone 6的设计稿为例，设计稿的大小为750px，实际iPhone 6的大小为375px。
在思考过后，可得出一个通用的计算函数，输入参数$px为设计稿的实际长度，于是有：

@function px2rem($px) {
    $rem: 方案比例 * 设计稿宽度;
    @return $px/$rem * 1rem;
}

以750px的设计稿为例，有：

@function px2rem($px) {
    $rem: 1/10 * 750px;
    @return $px/$rem * 1rem;
}

三、改进的空间

以上的两种方案及其他方案需要动态去改变根元素的大小，大多数都是通过js的方式去调整大小，有一定的耦合度。

在这里，还有一个方案，即用vw来动态调整根元素的大小（当然，也可以用vm来替代rem），有：

html {
    font-size: 37.5px;
    font-size: 10vmin;
}

@media only screen and (max-width: 320px) {
    html {
        font-size: 32px;
    }
}

@media only screen and (min-width: 540px) {
    html {
        font-size: 54px;
    }
}

@media only screen and (min-width: 1080px) {
    html {
        font-size: 108px;
    }
}

四、总结

只有学习，学习，再学习，才能跟得上前端的脚步。

五、值得借鉴的文章

大厂是怎么做移动端适配的