CSS-移动端页面布局的适配方案总结

移动端页面布局大概有两种方案：

1. 使用rem作为尺寸单位，通过js来根据屏幕宽度来控制rem的大小，从而达到适配的目的；
2. 使用vm，即视口viewport，来作为尺寸大小。

1、rem布局方案

首先，将flexible.js引入到项目中

// flexible.js

(function flexible (window, document) {
    var docEl = document.documentElement;
    var dpr = window.devicePixelRatio || 1;

    // adjust body font size
    function setBodyFontSize () {
        if (document.body) {
            document.body.style.fontSize = (12 * dpr) + 'px';
        }
        else {
            document.addEventListener('DOMContentLoaded', setBodyFontSize);
        }
    }
    setBodyFontSize();

    // set 1rem = viewWidth / 10
    function setRemUnit () {
        var rem = docEl.clientWidth / 10;
        docEl.style.fontSize = rem + 'px';
    }

    setRemUnit()

    // reset rem unit on page resize
    window.addEventListener('resize', setRemUnit);
    window.addEventListener('pageshow', function (e) {
        if (e.persisted) {
          setRemUnit();
        }
    })

    // detect 0.5px supports
    if (dpr >= 2) {
        var fakeBody = document.createElement('body');
        var testElement = document.createElement('div');
        testElement.style.border = '.5px solid transparent';
        fakeBody.appendChild(testElement);
        docEl.appendChild(fakeBody);
        if (testElement.offsetHeight === 1) {
            docEl.classList.add('hairlines');
        }
        docEl.removeChild(fakeBody);
    }
}(window, document))

由js代码可见，html的font-size为当前窗口的宽度clientWidth / 10。例如，对于iphone 6/7/8，clientWidth为375，则 1 rem = 37.5px。

其次，新建一个_function.scss，创建一个将px转换为rem的函数 px2rem。

// _function.scss 

@function px2rem($px, $base-font-size: 75px) {
    @if (unitless($px)) {
        @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
        @return px2rem($px + 0px); // That may fail.
    } @else if (unit($px) == rem) {
        @return $px;
    }
    @return ($px / $base-font-size) * 1rem;
}

其中，base-font-size 为 UI 设计稿宽度的 1/10 。例如，当前设计稿的宽度为750px，故 $base-font-size = 750 / 10 px。

最后，在每一个scss文件中，都要引入 _function.scss，在写尺寸的时候，直接量取设计稿中对应的单元的尺寸即可，写法如下：

.wrap {
    overflow: hidden;
    padding-top: px2rem(75px);
}

此 .wrap 的 padding-top 值在UI设计稿中的尺寸位51px，则写成 px2rem(51px)，最终会被转成 2 rem。

2、vm布局方案

认识视口单位

根据CSS3规范，视口单位主要包括以下4个：

vw : 1vw 等于视口宽度的1%
vh : 1vh 等于视口高度的1%
vmin : 选取 vw 和 vh 中最小的那个
vmax : 选取 vw 和 vh 中最大的那个
视口单位区别于%单位，视口单位是依赖于视口的尺寸，根据视口尺寸的百分比来定义的；而%单位则是依赖于元素的祖先元素。

占坑，待续。。。

三种适配方案
https://juejin.im/post/5b0a9f266fb9a07aa114a908

使用Flexible实现手淘H5页面的终端适配
https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

再聊移动端页面的适配
https://www.w3cplus.com/css/vw-for-layout.html

如何在Vue项目中使用vw实现移动端适配
https://www.w3cplus.com/mobile/vw-layout-in-vue.html