15. 重学webpack——移动端适配方案

推荐：《webpack学完这些就够了》

《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记，配置和原理应有尽有。现在由于webpack5.0的诞生，打算从现在开始从0开始写一遍webpack5.0的学习笔记，与大家一起分享学习，可以点击上方专栏订阅哦。

以下是本节正文：

移动端适配方案

当我们在移动端开发时，会发现需要兼容各种尺寸的终端设备，所以，如果有一套统一的适配方案，是十分有必要的。

适配方案

1. 将页面宽度分成 10 份（x 份自己定），那么每份宽度就是根元素字体的大小。

let doceEle = document.documentElement;
function setRemUnit(){
    dicEle.style.fontSize = docEle.clientWidth / 10 + 'px';
}
setRemUnit();
window.addEventListener('resize', setRemUnit);

这样，就能使得根元素的大小不管屏幕有多大，都是屏幕的十分之一
那么，我们去设置页面元素长度/字体等大小的时候，按照 px 去写，比如 20px，然后就可以用px2rem-loader自动转换成 2rem

2. 利用 px2rem-loader 自动将 px 转成 rem

• 安装

npm i px2rem-loader -D

• 配置

modules： {
    rules: [
    {
      test:/\.css$/,
        use:[{
                MiniCssExtractPlugin.loader,
                'css-loader',
                'postcss-loader',
+               {
+                    loader:'px2rem-loader',
+                    options:{
+                        remUnit:75, // 根元素字体大小，也就是每 1rem 代表 75px
+                        remPrecesion:8 // 精度，px 转 rem 的时候保留 8 位小树
+                    }
+                }]
+            },
    ]
}

这里需要注意，px2rem-loader 是在 css-loader 之前的一个 loader，即：先处理好单位，再去走 css-loader