postcss-plugin-px2rem的使用

2021-03-30 07:28

阅读：381

标签：save cli Fix auto col unit ati rem def

首先需要安装postcss-plugin-px2rem

npm install --save-dev postcss-plugin-px2rem

//package.json

var px2rem = require(‘postcss-px2rem‘);
 
module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader"
      }
    ]
  },
  postcss: function() {
    return [px2rem({remUnit: 75})];
  }
}

// 一般postcss建议单独配置在文件postcss.config.js中
module.exports = {
  plugins: [
    require(‘autoprefixer‘)({ browsers: ‘last 2 versions‘ }),
    require(‘postcss-px2rem‘)({remUnit: 75})
  ]
}

// REM是根据根结点来计算各个子节点的值，所以根结点也要做响应式变化。utils/setRem.js
export default function setRem(baseWidth = 750) {
  const dpr = window.devicePixelRatio;
  const currentWidth = document.documentElement.clientWidth;
  let remSize = 0;
  let scale = 0;
  scale = currentWidth / baseWidth;
  remSize = baseWidth / 10;
  remSize = remSize * scale;
  document.documentElement.style.fontSize = remSize + ‘px‘;
  document.documentElement.setAttribute(‘data-dpr‘, `${dpr}`);
}

在index.js中引入即可

import setRem from ‘./utils/setRem‘
setRem()

postcss-plugin-px2rem的使用

标签：save cli Fix auto col unit ati rem def

原文地址：https://www.cnblogs.com/wangtaolearning/p/12597137.html

上一篇：mormot websocket

下一篇：win7点击右键不能新建文件夹怎么办？win7右键不能新建文件夹解决方法

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：postcss-plugin-px2rem的使用
文章链接：http://soscw.com/index.php/essay/69894.html

亲，登录后才可以留言！

postcss-plugin-px2rem的使用

评论

热门文章

推荐文章

最新文章

置顶文章