postcss-pxtorem配置

背景知识

为什么会有这pxtorem

因为我们还原的psd 图通常是px 为单位的，而px 是一个绝对长度单位，它与其他任何东西都没有关系，通常被认为总是相同的大小。这MDN的原话。

​ px是96分之一英寸。

​ 这就会导致我们在不同尺寸的屏幕或者窗口大小下，元素大小是一样的，可能有同学要问了，元素大小一样不是更好么，试想一下，你的头像在手机大小的显示器上的大小跟平常笔记本显示器上的大小一样，很不美观，几乎不能阅读，没有用户体验，这个时候想，如果元素能根据设备大小自动缩放就好了，于是在脑子里回忆，好像有个单位能做到，vm和vh，它们是根据视窗的宽高的来定义的相对长度单位。

​ 但是，当视窗宽度不变时，视窗高度发生变化，那元素就只有高度发生变化了，元素会被拉长或者压扁，那有没有一个单位能实现宽高的同时缩放呢，在css的单位中有一个相对长度单位rem能满足我们的需求，rem是一个相对与根元素的字体大小的相对长度单位。但是它也不能实现当窗口变化时，元素大小也发生变化，因为根元素的字体大小是不变的，我们把根元素设置成可变的就可以了。

​ 基于以上，我们更愿意去用rem做单位，而不是px，但是我们拿到的就是px, 我们需要将px转换成rem，这是很麻烦的，元素长度单位px/根元素的字体大小px=rem，一般情况下还会有小数点，这个时候我们会希望有东西能帮我们做这个事情，于是potorem出场了。

安装

npm install postcss-pxtorem --save

配置pxtorem

因为我的vue-cli版本是 5.0.8 直接去 vue.config.js文件去修改是不行的，我这里是直接在根目录新建postcss.config.js是可以的，直接修改vue.config.js方法可以参考这篇文章

module.exports = {
    "plugins": {
        "postcss-pxtorem": {
            rootValue: 20, //换算基数，将多少px转成1单位rem 
            unitPrecision: 3, //允许REM单位增长到的十进制数字,小数点后保留的位数。
            propList: ['*'],
            exclude: false, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
            mediaQuery: false,  //（布尔值）允许在媒体查询中转换px。
            minPixelValue: 1 //设置要替换的最小像素值
        },
    }
}

上面的参数可以根据自己需要进行设置

以上还不能达到自适应缩放的功能

rem大小自适应

// 基准大小
const baseSize = 20
// 设置 rem 函数
function setRem() {
    // 当前页面宽度相对于 1920 宽的缩放比例，可根据自己需要修改。
    const scale = document.documentElement.clientWidth / 1920
    // 设置页面根节点字体大小, 字体大小最小为12
    let fontSize = (baseSize * scale) > 12 ? (baseSize * scale) : 12

    document.documentElement.style.fontSize = fontSize + 'px'
}
//初始化
setRem()
// 改变窗口大小时重新设置 rem,这里最好加上节流
window.onresize = function () {
    setRem()
}