px2rem-loader

1. 安装插件

npm i px2rem-loader -D

2. 配置Webpack文件

'use strict';
// npm i mini-css-extract-plugin -D
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
module.exports = {
 
    module: {
        rules: [
            {
                test: /.less$/,
                use: [
                    // 将内连样式单独处理为一个样式文件
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    // 添加自动补齐后辍
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: () => [
                                require('autoprefixer')({
                                    // 最近两个版本、使用人数所占比例、兼容哪个版本以上
                                    browsers: ['last 2 version', '>1%', 'ios 7']
                                })
                            ]
                        }
                    },
                    // 配置将px转为rem的插件
                    {
                        loader: 'px2rem-loader',
                        options: {
                            // 1rem等于75px,适用于750px视觉稿
                            remUnit: 75,
                            // px转成rem后小数点的位数
                            remPrecision: 8
                        }
                    },
					'sass-loader'
                ]
            }
        ]
    },
 
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name]_[contenthash:8].css'
        }),    
    ]
};

3. 自动计算根元素字体大小

(function (doc, win) {
    var element = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        // 设计稿的宽度
        designWidth = 750,
        calc = function () {
            var clientWidth = element.clientWidth;
            // 定一个最大的宽度,以免全屏后难看
            if (clientWidth > 677) {
                clientWidth = 677
            };
            if (!clientWidth) return;
            element.style.fontSize = 40 * (clientWidth / designWidth) + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, calc, false);
    doc.addEventListener('DOMContentLoaded', calc, false);
})(document, window)

注意❗

不想要rem转换为px， 将px小写改为大写。

扩展阅读

• Webpack实现将CSS中的px转换为rem