vue3.0中使用postcss-pxtorem

postcss-pxtorem是PostCSS的插件，用于将像素单元生成rem单位。

前端开发还原设计稿的重要性毋庸置疑，目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值，为了能够直接按照设计图的尺寸开发，并且能自动编译转换成rem，下面就来分享下postcss-pxtorem的使用。

1.安装依赖

npm install postcss-pxtorem -D

2.设置规则（更改postcss.config.js,如果没有该文件，在项目根目录创建即可，该文件为使用vue-cli3自动创建的文件）

module.exports = {
  "plugins": {
    // to edit target browsers: use "browserlist" field in package.json
    "postcss-pxtorem": {
      rootValue: 100, // 结果为：设计稿元素尺寸/100，比如元素宽1920px,最终页面会换算成 19.2rem
      propList: ['*'],
      minPixelValue: 1,
      selectorBlackList: ['.threems'] // 过滤掉.threems-开头的class，不进行rem转换
    }
  }
}

如果对rem不在了解的话，可以看我之前写过的一篇博客;https://blog.csdn.net/qq_35432904/article/details/51804227

3、页面rem自适应脚本

在public文件加下面的index.html.头部添加下面代码，脚本语言可以根据自己需求修改，也可以新建一个js文件，写rem自适应脚本，引用的方式使用

 <script>
      (function (a, b) {
        // 页面自适应脚本
        var c = a.documentElement,
            d = "orientationchange" in window ? "orientationchange" : "resize",
            e = window.recalc = function () {
              var a = c.clientWidth;
              if (a) {
                var fontsize = Math.floor(100 * (a / 1920));
                if (fontsize < 50) {
                  fontsize = 50;
                }
                if (fontsize >= 100) {
                  fontsize = 100;
                }
                c.style.fontSize = fontsize + "px"
              }
            };
        a.addEventListener && (b.addEventListener(d, e, !1), a.addEventListener("DOMContentLoaded", e, !1));
      })(document, window);
    </script>

最后刷新页面看下，就会发现原本用px的单位已经自动换算成了rem;

参数说明：

options说明：

{

    rootValue: 16,

    unitPrecision: 5,

    propList: ['font', 'font-size', 'line-height', 'letter-spacing'],

    selectorBlackList: [],

    replace: true,

    mediaQuery: false,

    minPixelValue: 0,

    exclude: /node_modules/i

}

• rootValue (Number | Function) Represents the root element font size or returns the root element font size based on the input parameter
• unitPrecision (Number) The decimal numbers to allow the REM units to grow to.
• propList (Array) The properties that can change from px to rem.
  • Values need to be exact matches.
  • Use wildcard * to enable all properties. Example: ['*']
  • Use * at the start or end of a word. (['*position*'] will match background-position-y)
  • Use ! to not match a property. Example: ['*', '!letter-spacing']
  • Combine the "not" prefix with the other prefixes. Example: ['*', '!font*']
• selectorBlackList (Array) The selectors to ignore and leave as px.
  • If value is string, it checks to see if selector contains the string.
    • ['body'] will match .body-class
  • If value is regexp, it checks to see if the selector matches the regexp.
    • [/^body$/] will match body but not .body
• replace (Boolean) Replaces rules containing rems instead of adding fallbacks.
• mediaQuery (Boolean) Allow px to be converted in media queries.
• minPixelValue (Number) Set the minimum pixel value to replace.
• exclude (String, Regexp, Function) The file path to ignore and leave as px.
  • If value is string, it checks to see if file path contains the string.
    • 'exclude' will match \project\postcss-pxtorem\exclude\path
  • If value is regexp, it checks to see if file path matches the regexp.
    • /exclude/i will match \project\postcss-pxtorem\exclude\path
  • If value is function, you can use exclude function to return a true and the file will be ignored.
    • the callback will pass the file path as a parameter, it should returns a Boolean result.
    • function (file) { return file.indexOf('exclude') !== -1; }