vue-cli3项目使用lib-flexible + postcss-px2rem实现页面自适应

1. 安装依赖

yarn add lib-flexible postcss-px2rem -S

2. main.js引入lie-flexible

import "lib-flexible";

注: lie-flexible的引入文件里对屏幕的范围是需要进行修改的,默认最大屏幕宽度是540

    function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 1920) { // 自适应的最大宽度
            width = 1920 * dpr;
        }else if(width / dpr < 960){ // 自适应的最小宽度
            width = 960 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

3. 在vue.config.js中对postcss-px2rem设置

// vue.config.js
    css: {
        // 启用 CSS modules
        modules: false,
        // 是否使用css分离插件
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // cs