webapck5 学习10 -- 移动端 px 自动转换 rem想要做到移动端的弹性布局，方案大致有 vw 与 rem

想要做到移动端的弹性布局，方案大致有 vw 与 rem 两种，现在我们说 rem 这种

首先我们需要一个库，来帮助我们动态的去设置根节点(html)的 font-size 大小
其次我们需要一个能自动帮助我们转化单位的工具

lib-flexible

这个是手淘的 rem 方案，我们直接拿来用就行了，这里特别说一下，手淘的方案里面有个 540 数字，这是一个经验值，因为在dpr 为 1 的 1 倍屏上，一般不会超过 540，而超过 540 的，一般 dpr 都不是 1，这个也是为了防止手机或平板上面横屏，布局还有字体大小会格外的大

加载依赖

npm i lib-flexible -D

配置

在页面模板文件 index.html 中，使用内联的方式加入 lib-flexible 代码

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    // <% 是 html-webpack-plugin 的模板语法，后面的 require 是 webpack 内联的写法
    <script><%= require('./node_modules/lib-flexible/flexible.js?raw') %></script>
</head>

px2rem-loader

使用 px2rem-loader 将 px 转换成 rem

加载依赖

npm i px2rem-loader -D

配置

module: {
    rules: [
      {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                              plugins: [
                                [
                                  'autoprefixer',
                                  {
                                    // 选项
                                  },
                                ],
                              ],
                            },
                        }
                    },
                    {
                        loader: 'px2rem-loader',
                        options: {
                            remUnit: 75, // rem 相对于 px 的单位， 1rem = 75 px
                            remPrecision: 8 // rem 小数点后面的位数
                        }
                    }
                ]
            }
    ]
}