1. Understanding viewport Units According to CSS3 specification, viewport units mainly include the following four:

Vw: 1vw is equal to 1% of the viewport width vh: 1vh is equal to 1% of the viewport height vmin: Select vmax of vw and vH: The largest viewport unit in VW and VH is selected to be different from the % unit. The viewport unit is defined according to the percentage of viewport size depending on the size of the viewport. The % unit is dependent on the element’s ancestor. 2. How to use VW layout in VUE project. With the help of the Vue official website provides the build project and some PostCSS plug-ins to complete.

"Cssnano-preset -advanced": "^4.0.6"," postCSS-cssNext ": "^3.1.0", "postCSs-import ": ", "" ^ 12.0.1 postcss - px - to - viewport" : "^ 1.0.0", "postcss - url" : "^ 8.0.0", "postcss - viewport - units" : "^ 0.1.6 postcss -", "write - SVG" : "^ 3.0.1", "postcss - aspect - thewire - mini" : "^" 1.0.1,Copy the code

Build the project using VUE-CLI.

vue create vue-vw
Copy the code

Follow the command prompt to do the corresponding operation,

Go to the newly created project directory,

cd vue-vw
Copy the code

The project structure should look like this

When NPM Run Serve runs, you can see the normal project page.

At this point we will start installing the PostCSS plugin by creating the configuration. Choose to create postcsrc. Js in the root directory of the project or configure postCSS in package.json.

Install the plug-ins mentioned above

 npm install cssnano-preset-advanced postcss-cssnext postcss-import postcss-px-to-viewport postcss-url postcss-viewport-units postcss-write-svg postcss-aspect-ratio-mini -S
Copy the code

After the installation is successful, you can see the newly installed dependency packages in the package.json file in the project root directory and configure the PostCSS plug-in

"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-import": {},
"postcss-url": {},
"postcss-aspect-ratio-mini": {},
"postcss-write-svg": {
"utf8": false
},
"postcss-cssnext": {},
"postcss-px-to-viewport": {
"viewportWidth": 750,
"viewportHeight": 1334,
"unitPrecision": 3,
"viewportUnit": "vw",
"selectorBlackList": [".ignore", ".hairlines"],
"minPixelValue": 1,
"mediaQuery": false
},
"cssnano": {
"preset": "advanced",
"autoprefixer": false,
"postcss-zindex": false
}
}
},Copy the code

Several key parameters are configured

"Postcss-px-to-viewport ": {viewportWidth: 750, // The width of the window corresponds to the width of our design, which is 750 viewportHeight: UnitPrecision: 3; // Specify the decimal number of Windows converted to the px unit value (most of the time it is not divisible) 'vw', // specify the window unit to convert to. Recommend using vw selectorBlackList: ['.ignore', '.hairlines'], // Specify a class that is not converted to Windows units. It can be customized, and can be added indefinitely. 1, // less than or equal to '1px' does not convert to window units, you can also set to the value you want mediaQuery: false // Allows conversion of 'px' in media queriesCopy the code

When you start the project, you’ll find that the px units you wrote in the normal layout have been converted to a VW layout by the PostCSS plugin! You can build your own project and give it a try. The emergence of Flexible also caused many students’ misunderstanding of REM. Just as div was misunderstood back then. Therefore, we all think REM is versatile, he can directly solve the mobile adaptation problem. In fact, this is not the case. For now, VW layout should be an adaptation scheme with relatively perfect compatibility in all aspects