vue-cli5配置postcss-pxtorem

大芳233

已于 2022-10-14 16:45:49 修改

阅读量1.3k

点赞数

分类专栏：前端学习文章标签： vue.js javascript

于 2022-10-14 16:32:47 首次发布

本文链接：https://blog.csdn.net/qq_39098031/article/details/127322992

版权

1.引入postcss-pxtorem

yarn add postcss-pxtorem -S -D
npm install postcss-pxtorem --save-dev

2.根目录新建 postcss.config.js

module.exports = {
   
  "plugins": {
   
    "postcss-pxtorem": {
   
      "rootValue": 192,//设计稿1920
      "propList": ["*"],
      minPixelValue: 12, 
      unitPrecision: 2, // 保留rem小数点
      selectorBlackList: ['ig'] 
    },
  }
}

3. 添加一个工具类，根据网页宽度配置字体，refreshRem方法按自己需要更改


; (function (win, lib) {
   
  var doc = win.document;
  var docEl = doc.documentElement;
  var metaEl = doc.querySelector('meta[name="viewport"]');
  var flexibleEl = doc.querySelector('meta[name="flexible"]');
  var dpr = 0;
  var scale = 0;
  var tid: any;
  var flexible = lib.flexible || (lib.flexible = {
   });

  if (metaEl) {
   
    var match = metaEl.getAttribute('content')!.match(/initial\-scale=([\d\.]+)/);
    if (match) {
   
      scale = parseFloat