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

Posted 2023-01-09 aiguangyuan

由于现在众多移动设备的兴起，各种手机厂商推出了许多不同屏幕尺寸大小的手机型号，前端人员在编写代码时就需要适配各种手机屏幕。

传统的样式适配是利用CSS 的媒体查询，但是这种方式要为每一种规格尺寸的屏幕写一套代码适配，比较繁琐。

这种情况下，利用rem来实现移动端的适配会更为方便一点。在W3C中，对rem的定义是相对于根元素字体的大小，即根元素的字体大小是10px，那2rem的实际尺寸就是20px。在Webpack中我们可以利用px2rem-loader这个插件在打包时，自动的将px转换为rem，非常方便。

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',
                    'less-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
                        
                    

                ]
            
        ]
    ,

    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)

关于自动计算根元素大小也可以使⽤⼿淘的lib-flexible库。