推荐:《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

  1. 利用 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