postcss-pxtorem适配

看到标题不禁想到了rem...rem有种奇怪的魔力
个人总结适配大体分为两类：

• 缩放类
• 媒体查询类

对比	缩放类	媒体查询类
实现方案	rem、scale	@media
优点	一套代码可以适用不同大小的设备，节约人力	在满足看清的情况下，可以展示更多的内容
缺点	在更大的设备下，看到更大的内容，而非更多的内容	需要针对不同尺寸段设置单独的css，需要更多的人力投入

当前大部分应该使用的rem适配，所以...跟着大家总是没错滴...自己尝试用postcss-pxtorem来做适配

食用方法

通用文件rem.js

function setRem() {
    // 设计稿320px  默认大小16px; 320px = 20rem
    // 设计稿375px  默认大小37.5px; 375px = 10rem
    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    //得到html的Dom元素
    let htmlDom = document.getElementsByTagName('html')[0];
    //设置根元素字体大小
    htmlDom.style.fontSize = htmlWidth / 20 + 'px';
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem()
}

方法一

package.json配置

// npm install postcss-pxtorem
"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 16,
        "propList": ["*"]
      }
    }
},
// main.js
import './rem.js'

方法二

postcss.config.js配置(文件没有自己创建)

// npm install postcss-pxtorem
module.exports = {
    plugins: {
        'autoprefixer': {
            browsers: ['Android >= 4.0', 'iOS >= 7']
        },
        'postcss-pxtorem': {
            rootValue: 16,
            propList: ['*']
        }
    }
}
// main.js
import './rem.js'

方法三

vue.config.js配置

// npm i amfe-flexible -S  npm i postcss-pxtorem -D
module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require("autoprefixer")({
                        // 配置使用 autoprefixer
                        overrideBrowserslist: ["last 15 versions"]
                    }),
                    require("postcss-pxtorem")({
                        rootValue: 16, // 换算的基数
                        unitPrecision: 6, // 允许rem单位精度
                        propWhiteList: [], // 允许换算白名单(空数组表示禁用白名单，全部转换)
                        propBlackList: [], // 不允许转换名单
                        exclude: /node_modules/, // 排除文件夹
                        selectorBlackList: ["ig"], // 忽略的选择器，保留px
                        // propList: ["*"],
                    })
                ]
            }
        }
    }
};

备注：如果报错：Error: PostCSS plugin postcss-pxtorem requires PostCSS 8，切换[email protected]