1. Download lib-flexible through npm
npm install lib-flexible --save
2. Introduce lib-flexible in main.js
import 'lib-flexible/flexible.js'
3. Set the device width and zoom ratio by setting the meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4. Install px2rem-loader
npm install px2rem-loader
5. Configure px2rem-loader
Find the file util.js in bulid, add px2rem-loader to cssLoaders,
const cssLoader = { loader: 'css-loader', options: { minimize: process.env.NODE_ENV === 'production', sourceMap: options.sourceMap } } const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 75 } }
Then in this file, add px2remLoader in the generateLoaders method,
function generateLoaders (loader, loaderOptions) { const loaders = [cssLoader,px2remLoader] if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) }
6. Restart, run the project,
npm run dev
Write the unit in the component directly write px and then check in the browser to see that the unit is rem