1 移动端 适配.md

移动端 适配

**demo : https://github.com/HuJiaoHJ/h5-layout

vw + rem 方案

• 1、设置 html font-size 为 10vw

html {
    font-size: 10vw;
}

• 2、以750UI图为例，在 css 中，直接使用UI图上的长度值，单位设置为 px

.head {
    width: 750px;
}

• 3、引入 postcss-pxtorem 插件，配置如下：
  • https://github.com/HuJiaoHJ/h5-layout/blob/master/.postcssrc.js

require('postcss-pxtorem')({
    rootValue: 75,
    unitPrecision: 5,
    propList: ['*'],
    selectorBlackList: [],
    replace: true,
    mediaQuery: false,
    minPixelValue: 0
})

以上，就可以使用了 vw + rem 方案实现了移动端适配

1px border 问题

• 再谈Retina下1px的解决方案： https://www.w3cplus.com/css/fix-1px-for-retina.html

<script>
(function () {
    // 1px
    var dpr = window.devicePixelRatio;
    var isIPhone = window.navigator.appVersion.match(/iphone/gi);
    var UA = window.navigator.userAgent;
    var hacks = ['m1 note']; // 对 meizu 某型号进行hack，主要原因是 dpr为3，但是手机屏幕分辨率不够，会出现 1px border 过细的问题，这种问题主要出现在部分魅族手机上
    var flag = false;
    hacks.forEach(function (item) {
        if (UA.indexOf(item) >= 0) {
            flag = true;
            return;
        }
    });
    if (!isIPhone && flag) {
        dpr = dpr >= 2 ? 2 : dpr;
    }
    var scale = 1 / dpr;
    var metaEl = document.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    metaEl.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no, viewport-fit=cover');
    if (document.documentElement.firstElementChild) {
        document.documentElement.firstElementChild.appendChild(metaEl);
    } else {
        var wrap = document.createElement('div');
        wrap.appendChild(metaEl);
        document.write(wrap.innerHTML);
    }
})();
</script>

参考

• https://juejin.im/post/5b6575b0518825196b01fd85
• https://github.com/cuth/postcss-pxtorem#readme
• HuJiaoHJ/blog#6
• vw ployfill: https://github.com/HuJiaoHJ/viewport-units-polyfill/blob/master/index.js
• 使用Flexible实现手淘H5页面的终端适配: http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
• postcss-pxtorem： https://www.npmjs.com/package/postcss-pxtorem
• sublime 3 插件 cssrem： https://github.com/flashlizi/cssrem