移动端自适应vw、vh、rem

vw+vh+rem

一、vw、vh

　　vw、vh是基于视口的布局方案，故这个meta元素的视口必须声明。（视口宽度等于设备宽度，初始不缩放，用于解决页面宽高自动适配屏幕）

 <meta name="viewport" content="width=device-width,initial-scale=1.0">

　　1vw等于设备宽度的1%，同理1vh等于设备高度的1%，百分比布局

　　px转vw

　　https://developer.aliyun.com/mirror/npm/package/postcss-px-to-viewport

 

npm install postcss-px-to-viewport --save-dev

 

// postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-px-to-viewport': {
      viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      // viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
      viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false // 允许在媒体查询中转换`px`
    },
    'postcss-viewport-units': {
      // 排除会产生警告的部份
      filterRule: rule => rule.nodes.findIndex(i => i.prop === 'content') === -1
    },
    cssnano: {
      preset: 'advanced',
      autoprefixer: false, // 和autoprefixer同样具有autoprefixer，保留一个
      'postcss-zindex': false
    }
  }
}

 

二、rem

　　相对单位，根据CSS的媒体查询功能，更改html根字体大小，实现字体大小随屏幕尺寸变化。

　　举例：浏览器默认html的字体大小为16px，则1rem=16px

 

三、rem配置(方式1）

　　px自动转换rem，postcss-pxtorem

　　github:https://github.com/cuth/postcss-pxtorem

npm install postcss-pxtorem -D

 　　自动转换设置（vue-cli3）

// postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: {},
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 10,// 转换1rem=10px
      propList: ['*']
    }
  }
}

 

四、rem配置(方式2）

　　更多详情可参考：https://my.oschina.net/parchments/blog/1794335

　　1. lib-flexible，手淘开发，用于适配移动端的开源库

　　安装lib-flexible

　　  github:https://github.com/amfe/lib-flexible

npm install lib-flexible --save-dev
npm install px2rem-loader --save-dev

　　

　　2. 引入（vue）

// main.js
import 'lib-flexible'

　　

　　3. 配置（vue-cli3.0）

// vue.config.js
module.exports = {
    css: {
        loaderOptions: {
            css: {},
            postcss: {
                plugins: [
                    require('postcss-px2rem')({
                        // 以设计稿750为例， 750 / 10 = 75
                        remUnit: 75
                    }),
                ]
            }
        }
    },
};

 

　　4. 修改最大适配尺寸

　　依赖包中打开./node_modules/lib-flexible/flexible.js

// ./node_modules/lib-flexible/flexible.js 
// 找到该方法，默认最大适配尺寸为540px，修改540为需要值，重新运行项目即可
   function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 540 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

 五、rem配置(方式3）rem.js

　　参考：https://www.jianshu.com/p/98ab31ed7018

　　 两个参数分别是designWidth 和maxWidth，顾名思义，就是我们设计稿的宽度和我们设定的最大宽度

　　 main.js中引入rem.js(vue)

// rem.js
(function (designWidth, maxWidth) {
    var doc = document,
        win = window;
    var docEl = doc.documentElement;
    var tid;
    var rootItem, rootStyle;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        console.log(width,"width",maxWidth,"maxWidth")
        if (!maxWidth) {
            maxWidth = 540;
        }
        ;
        if (width > maxWidth) {
            width = maxWidth;
        }
        //与淘宝做法不同，直接采用简单的rem换算方法1rem=10px，与上面rootValue应该保持一致
        var rem = width * 10 / designWidth;
        //兼容UC开始
        rootStyle = "html{font-size:" + rem + 'px !important}';
        rootItem = document.getElementById('rootsize') || document.createElement("style");
        if (!document.getElementById('rootsize')) {
            document.getElementsByTagName("head")[0].appendChild(rootItem);
            rootItem.id = 'rootsize';
        }
        if (rootItem.styleSheet) {
            rootItem.styleSheet.disabled || (rootItem.styleSheet.cssText = rootStyle)
        } else {
            try {
                rootItem.innerHTML = rootStyle
            } catch (f) {
                rootItem.innerText = rootStyle
            }
        }
        //兼容UC结束
        docEl.style.fontSize = rem + "px";
    };
    refreshRem();

    win.addEventListener("resize", function () {
        clearTimeout(tid); //防止执行两次
        tid = setTimeout(refreshRem, 300);
    }, false);

    win.addEventListener("pageshow", function (e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    // if (doc.readyState === "complete") {
    //     doc.body.style.fontSize = "32px";
    // } else {
    //     doc.addEventListener("DOMContentLoaded", function (e) {
    //         doc.body.style.fontSize = "32px";
    //     }, false);
    // }
})(375, 750);