In order to achieve flexible layout on the mobile end, there are roughly two schemes: VW and REM. Now let’s talk about REM

  • First we need a library to dynamically set the font size of the root node (HTML)
  • Second, we need a tool that automatically helps us convert units

lib-flexible

This is the REM scheme for hand washing, so let’s just use it. In particular, there’s a 540 number in the rem scheme for hand washing, which is an empirical value, because on a screen with a DPR of 1, it’s usually not more than 540, and anything more than 540 is usually not 1. This is also to prevent the landscape, layout and font size from getting too big on your phone or tablet

Load depends on

npm i lib-flexible -D

configuration

Add lib-flexible code inline in the page template file index.html

<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 <script><%= require('./node_modules/lib-flexible/flexible.js? raw') %></script> </head>Copy the code

px2rem-loader

Convert PX to REM using px2REM-Loader

Load depends on

npm i px2rem-loader -D

configuration
module: { rules: [ { test: /\.less$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'less-loader', { loader: 'postcss-loader', options: {postcssOptions: {plugins: [['autoprefixer', {// options},],},}}, {loader: 'REMUNerit for Px2REM-loader ', options: {remUnit: 75, // REM saves for px units, 1rem = 75px remPrecision: 8 // REM saves for the decimal point}}]}]}Copy the code