The followingvue.js column will introduce to you the use of vw in the vue-cli project-a more native mobile solution than flexible. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.
Installation
Command line input:
yarn add postcss-px-to-viewport
or
npm i postcss-px-to-viewport -save -dev
Configuration## In #package.json, add code in postcss:
"postcss": { "plugins": { "autoprefixer": {}, "postcss-px-to-viewport": { "viewportWidth": 750, "minPixelValue": 1 } } },
Configuration items: "viewportWidth": 750, //The width of the design draft
" unitPrecision": 3, // The number of digits to retain the decimal point after converting px to vw and vh
"minPixelValue": 1, // The minimum px value that is not converted to vw
Usage scenarios
vw and vh will produce effects on both PC and mobile terminals, unlike flexible which will only convert the px of devices below a certain width (remember it is 750px) to rem, so if the design draft is for mobile terminals, Health, full use of the vw unit will cause the page font to be too large on the PC side, etc., which need to be handled as appropriate and chosen according to the application scenariovue-cli3.0 introduces lib-flexible/px2rem
compatibility
vw/vh unit actually appeared relatively early, but the support was not very good before. Now with the development of browsers, most (more than 92%) browsers already support it vw/vhRelated recommendations:For more programming-related knowledge, please visit:
2020 front-end vue interview questions summary (with answers)
vue tutorial recommendation: The latest 5 vue.js video tutorial selections in 2020
Programming Teaching! !
The above is the detailed content of How to use vw unit in vue-cli project?. For more information, please follow other related articles on the PHP Chinese website!