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

越陌度阡

发布于 2023-01-09 15:49:47

1.4K00

代码可运行

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）大前端（横向跨端 & 纵向全栈）

运行总次数：0

代码可运行

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

传统的样式适配是利用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库。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-01-08，如有侵权请联系 cloudcommunity@tencent.com 删除

网站