Vue-cli 3.x 中实现页面等比缩放(postcss-px2rem)

# 前言

前端的童鞋们可能会遇到这样一个问题，UI设计师给出了一套设计图，我们需要自适应各种屏幕，且各个元素的大小和字体大小也随之缩放。

# 经历

看到这个需求，本人首先会想到之前的思路是媒体查询，检测不同范围的屏幕宽度，写不同的样式来改变排版，以适应pc、ipad和移动端等。

# 问题

假设屏幕大于999px都属于pc端，pc 分为大屏超大屏，我们需要响应大屏到超大屏之间的适应，举个栗子：
例如：媒体查询（屏幕999~1200 div.title 都是 200px 宽，1200~1440。。。）
也就是说某个区间内，div.title 的宽度是不变的，当然你要设成百分比也不是可变的，那字体是否也可变呢？想要实时响应字体大小和元素大小又该如何解决呢?

# 解决等比缩放

这里我们可以使用一个插件，可以很轻松的解决掉这个实时响应等比缩放的问题：px2rem 插件。

安装

npm i postcss-px2rem --s

配置

vue.config.js 文件

// 1. 引入等比适配插件
const px2rem = require('postcss-px2rem')

// 2. 配置基本大小
const postcss = px2rem({
    // 基准大小 baseSize，需要和rem.js中相同
    remUnit: 100
})
// 3. 使用插件
module.exports = {
  css: {
        loaderOptions: {
            // 等比缩放的插件
            postcss: {
                plugins: [
                    postcss
                ]
            }
        }
    }
}

需要结合 rem.js 配置

var fun = function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            // 这里是假设在750px宽度设计稿的情况下，1rem = 100px；
            // 可以根据实际需要修改 
            // 1920 响应的最大屏幕
            docEl.style.fontSize = (clientWidth / 1920) * 100 + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
}
fun(document, window);
window.onresize = function () {
    fun(document, window);
}

到这里配置完成啦，看下效果

配置前

image.png

配置后

image.png

哇哦，是不是很简单，是不是很神奇，小伙伴们赶快试试吧 ~~
点赞 ~~ 转发 ~~

# 番外篇

还有两款插件，分别为：
postcss-plugin-px2rem 和 postcss-pxtorem

postcss-plugin-px2rem 在 vue.confing 中常用配置为：

css: {
    loaderOptions: {
        postcss: {
            plugins: [
                require('postcss-plugin-px2rem')({
                    // rootValue: 100, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
                    // unitPrecision: 5, //允许REM单位增长到的十进制数字。
                    //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
                    // propBlackList: [], //黑名单
                    exclude: /(node_module)/,  //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
                    // selectorBlackList: [], //要忽略并保留为px的选择器
                    // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
                    // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
                    mediaQuery: false,  //（布尔值）允许在媒体查询中转换px。
                    minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
                }),
            ]
        }
    }
}

postcss-pxtorem 在 vue.confing 中常用配置为：

css: {
    loaderOptions: {
        postcss: {
            plugins: [
                require('postcss-pxtorem')({//这里是配置项，详见官方文档
                    rootValue: 1, // 换算的基数
                    selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
                    propList: ['*'],
                }),
            ]
        }
    }
}

最后编辑于：2020.12.14 10:26:55