推荐：《webpack学完这些就够了》
《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记，配置和原理应有尽有。现在由于webpack5.0的诞生，打算从现在开始从0开始写一遍webpack5.0的学习笔记，与大家一起分享学习，可以点击上方专栏订阅哦。
以下是本节正文：
移动端适配方案
当我们在移动端开发时，会发现需要兼容各种尺寸的终端设备，所以，如果有一套统一的适配方案，是十分有必要的。
适配方案 将页面宽度分成 10 份（x 份自己定），那么每份宽度就是根元素字体的大小。let doceEle = document.documentElement; function setRemUnit(){ dicEle.style.fontSize = docEle.clientWidth / 10 + 'px'; } setRemUnit(); window.addEventListener('resize', setRemUnit); 123456
这样，就能使得根元素的大小不管屏幕有多大，都是屏幕的十分之一
那么，我们去设置页面元素长度/字体等大小的时候，按照 px 去写，比如 20px，然后就可以用px2rem-loader自动转换成 2rem
npm i px2rem-loader -D 1 配置
modules： { rules: [ { test:/.css$/, use:[{ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', + { + loader:'px2rem-loader', + options:{ + remUnit:75, // 根元素字体大小，也就是每 1rem 代表 75px + remPrecesion:8 // 精度，px 转 rem 的时候保留 8 位小树 + } + }] + }, ] }
123456789101112131415161718这里需要注意，px2rem-loader 是在 css-loader 之前的一个 loader，即：先处理好单位，再去走 css-loader
