前端 rem

最新推荐文章于 2024-05-02 12:19:25 发布

斯诺伐克

最新推荐文章于 2024-05-02 12:19:25 发布

阅读量635

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qw2319205chu/article/details/88613745

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

px2rem的原理也很简单，重点在于预处理以px为单位的css文件，处理后将所有的px变成rem单位。可以通过两种方式来实现：

1） webpack loader的形式：

npm install px2rem-loader

在webpack的配置文件中：

module.exports = {
  // ...
  module: {
    rules: [{
      test: /\.css$/,
      use: [{
        loader: 'style-loader'
      }, {
        loader: 'css-loader'
      }, {
        loader: 'px2rem-loader',
        // options here
        options: {
          remUni: 75,
          remPrecision: 8
        }
      }]
    }]
  }

2）webpack中使用postcss plugin

npm install postcss-loader

在webpack的plugin中:

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