postcss-pxtorem px转成rem 项目配置

在做大屏态势感知类型的项目指定会需要做适配，h5了这些.....

postcss-pxtorem 可以把你的px转化成rem(好用推荐）

 

说说怎么用吧：

第一步： 

 npm install postcss-pxtorem -D

第二步引入：

   方法一： 在vue.config.js中

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

这个样就引入成功了，需要重新运行项目啊

 

 方法二：就是换了一种方法引入罢了 看你想用哪个把

创建一个.postcssrc.js

module.exports = {
    plugins: {
      autoprefixer: {},
      'postcss-pxtorem': {
        rootValue: 16,
        propList: ['*'],
        // exclude: /^((?!((cccc)(\/|\\)(aaa)(\/|\\)(bbb))).)*$/,
      },
    },
  };

 

 

说下参数吧：

rootValue	（数字|函数）表示根元素字体大小或根据input参数返回根元素字体大小
unitPrecision	数字）允许REM单位增长的十进制数字。
propList	（数组）可以从px更改为rem的属性。 值必须完全匹配。 使用通配符*启用所有属性。例：['*'] *在单词的开头或结尾使用。（['*position*']将匹配background-position-y） 使用!不匹配的属性。例：['*', '!letter-spacing'] 将“ not”前缀与其他前缀组合。例：['*', '!font*'
selectorBlackList	（数组）要忽略的选择器，保留为px 如果value是字符串，它将检查选择器是否包含字符串。 ['body'] 将匹配 .body-class 如果value是regexp，它将检查选择器是否匹配regexp。 [/^body$/]将匹配body但不匹配.bod
replace	布尔值）替换包含rems的规则，而不添加后备。
mediaQuery	（布尔值）允许在媒体查询中转换px。
minPixelValue	（数字）设置要替换的最小像素值。
exclude	（字符串，正则表达式，函数）要忽略并保留为px的文件路径。

 

 当然这就是帮你转成rem了 ， 还是需要你根据窗口resize的