Mobile terminal development, we need to do to fit a variety of sizes handle phone model
Simply record it, webpack automatic processing px turn rem, and we only need to write px units according to the draft design size like
1. Installation lib-flexible
yarn add lib-flexible2. Installation px2rem-loader
yarn add px2rem-loader3. Install [email protected]
yarn add [email protected]Configuration webpack.config.js
module: { rules: [ { test: /\.js$/, use: "babel-loader" }, { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader }, "css-loader", { loader: "px2rem-loader", // options here options: { remUni: 75, remPrecision: 8 } } ] }, { test: /\.(png|jpg|gif)$/, use: [ { loader: "file-loader", options: {} } ] } ] },Amoy together within the library to the page, because the code for the library to be executed in a page is loaded, so put the most front
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script> ${require("raw-loader!babel-loader!./node_modules/lib-flexible/flexible.js")} </script> </head> <body> <div id="root"></div> </body> </html>
