px 转rem使用 postcss-pxtorem、 postcss-px-to-viewport 记录

背景：

满屏高保证图片，无法适应不同款高比例 小屏幕无法展示完全，大屏幕空白区域过大 

适配进化历程
静态布局 采用px 加meta 标签缩放
流式布局 宽度百分比 高度px （会被拉伸，高度不变 全屏展示会出问题）
弹性布局 rem vw em （）
媒体查询 Bootstrap 样式多 布局不一 开发设计工作量大

淘宝： 实时生成行内样式 不随视口变化
京东： rem + px 部分高度rem 部分px
网易： vw + rem
58 ： 百分比 + px / 子页面 rem + 媒体查询

rem 实现方式：

方案一：

 --  dpr + rem 
-- 设置标签  `<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5">`
--  优点：  根据不同手机 还原度高 1px 问题
 
 代码： 

    const vpFunc = () => {
        var dpr = window.devicePixelRatio;
        var meta = document.createElement('meta');
        var scale = 1 / dpr;
        const resizeEvt ='orientationchange' in window ? 'orientationchange' : 'resize';
        meta.setAttribute('name', 'viewport');
        meta.setAttribute('content', 'width=device-width, user-scalable=no, initial-scale=' + scale +
        ', maximum-scale=' + scale + ', minimum-scale=' + scale);
        document.getElementsByTagName('head')[0].appendChild(meta);
        const recalc = function () {
            var deviceWidth  = document.documentElement.clientWidth;
            console.log(deviceWidth,'--deviceWidth')
            document.documentElement.style.fontSize = (deviceWidth / 10) +'px';
        };
        if (!document.addEventListener) return;
        document.addEventListener('DOMContentLoaded', recalc, false);
        window.addEventListener(resizeEvt, recalc, false);
        recalc()
    }

方案二：

	不缩放 + rem  `  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />`
 	只需监听屏幕变化 设置font-size 
 	缺点：分辨率 细节不清晰

开发书写：
1、写开发时写rem
2、开发时写px
— 插件转 rem(
postcss-pxtorem、
postcss-px2rem、
postcss-px-to-viewport （不需要监听屏幕宽度改变，不用设置font-size）
)
过滤不想转译的px 使用PX 或者在配置过滤掉

优点： 无需计算、可兼容老项目修复 配置灵活

缺点： 行内样式无法转译成功
层次较深文件 无法转译rem （还未知）

 // require('postcss-pxtorem')({
            //     rootValue: 10, //结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
            //     propList: ["*"], //是一个存储哪些将被转换的属性列表，这里设置为['*']全部，假设需要仅对边框进行设置，可以写['*', '!border*']
            //     unitPrecision: 5, //保留rem小数点多少位
            //     //selectorBlackList: ['.radius'],  //则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。
            //     replace: true, //这个真不知到干嘛用的。有知道的告诉我一下
            //     mediaQuery: false, //媒体查询( @media screen 之类的)中不生效
            //     minPixelValue: 2, //px小于12的不会被转换
            // }),

            // require('postcss-px-to-viewport')({
            //   viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度
            //   // viewportHeight: 667, // 视窗的高度，对应的是我们设计稿的高度(也可以不配置)
            //   unitPrecision: 5, // 指定'px'转换为视窗单位值的小数位数(很多时候无法整除)
            //   viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
            //   minPixelValue: 1, // 小于或者等于'1px'不转换为视窗单位
            //   mediaQuery: false, // 允许在媒体查询中转换'px'
        
            //   selectorBlackList: [] // 指定不需要转换的类，或者在不需要转换的，写的时候后面多跟一个类名
            //   // exclude: [/tabbar/]
            // }),

扩展阅读：

lib-flexible 源码
https://github.com/imochen/hotcss