Install Flexible and PostCSS-px2REM

With adaptive development, this can still be the case: you can write as many pixels as you measure on the design. It’s very convenient for you to develop projects

NPM installs the following 2 things at the same time, you can also install them separately.

npm i lib-flexible postcss-px2rem  --save
Copy the code

Flexible automatically tags the page based on the screen and dynamically controls the initial-scale, maximum-scale, minimum-scale and other attributes === => device scaling ratio

Font size: 75px for iphone6/7/8

Font-size: 82.2px (PS: Pixel is a Google phone, but that’s not the point.)

Postcss-px2rem uses the following:

Postcss-px2rem converts PX to REM. The REM unit is used to calculate the result based on the font size of the tag. 1rem= the font size of the HTML tag.

As shown below: all px units, but still adaptive, so easy to develop, you can write as many px pixels as you measure on the design

Now that we know what it does, let’s do it!

Introducing the lib – flexible

Introduce lib-flexible in the project entry file main.js

import 'lib-flexible'
Copy the code

Note: Flexible will dynamically add a tag to the page header, so be sure to remove or comment the tag from the public/index.html directory!!

As follows:

Configuration postcss – px2rem

Vue-cli3 built projects are much leaner than vue-CLI2 built projects, with some of the default configurations better and more tightly wrapped, making development more efficient. The configuration of Px2REM is placed in vue.config.js in vuE-CLI3 project.

The vue-cli3 project does not have vue.config.js, but eventually you will have to package the project and create the file manually!

Manually create vue.config.js in the project root directory

The complete vue.config.js code I put at the end of this article, directly copied in the past can be used.

All you need to configure is one value (the purple circle in the image above) :

How much do we remUnit for this configuration item? We usually set this value based on the blueprint for the simple reason that it is easy to develop. If the design saves for 750, we usually save it for 75 (one-tenth of the width of the design), so that when we remunerates the design, we can save it 1:1 for the width and height that it saves for.

If you save for a third-party UI framework like Mint-UI that isn’t compatible with PX2REM, you can get remUnit to be set to half the design width (let’s say 750px) of 75 = 37.5, which saves the mint-UI components 1:1, otherwise the style will change. Buttons, for example, get smaller. Since it is set to 37.5, we must also change the value to half of the design when writing the style.

Here is vue.config.js, which can be copied and used directly

Module.exports = {// baseUrl: process.env.NODE_ENV ==='production' ? '/' : '/'// Output file directory outputDir:'dist'// For nesting generated static assets (JS, CSS,img,fonts) directory // assetsDir:' ', // Specify the output path of the generated index.html (relative to outputDir). It can also be an absolute path indexPath:'index.html', // Default: 'index.html'
	filenameHashing: true, // use pages: undefined when building multiple pages, // eslint-loader whether to check lintOnSave when saving:true, // whether to use the build runtimeCompiler with the Vue core that contains the runtimeCompiler:false// By default babel-loader ignores all files in node_modules. If you want to explicitly translate a dependency through Babel, list transpileDependencies in this option: [], // if you don't need the production environmentsourceMap, which can be set tofalseTo speed up production environment builds. productionSourceMap:false, // If the value is an object, it is merged into the final configuration by webpack-merge. If the value is a function, the parsed configuration is accepted as an argument. This function can modify the configuration and return nothing, or it can return a cloned or merged version of the configuration. configureWebpack: config => {if (process.env.NODE_ENV === 'production'// Modify the configuration for the production environment... }else{// Modify the configuration for the development environment... }}, // is a function that takes a Webpack-chain-based ChainableConfig instance. Allows for more fine-grained changes to the internal WebPack configuration. chainWebpack: config => { /*config.module .rule('images')
		  .use('url-loader')
		    .loader('url-loader').tap(options => {// Modify its options...returnOptions})*/}, // CSS related configuration CSS: {// enable CSS modules modules:false// Whether to use CSS extract:true// Enable the CSSsource maps?
		sourceMap: false, // CSS presets loaderOptions: {CSS: {}, postcss: {plugins: [//remUnit] What numbers do we remUnit for the configuration item? We usually get it based on the blueprints for the simple reason that it saves for development. // If the drawings are 750 in width, we usually save it to 75, so that when we remunerat the designs, we can get 1:1 out of the drawings for development.'postcss-px2rem')({remUnit: 75})]}},}, // Webpack-dev-server saves: {host:'0.0.0.0',
		port: 8080,
		https: false,
		open: true,
		hotOnly: false, proxy: null, // set proxy before: app => {},}, // PWA pluginOptions: {//... }}Copy the code