How to use vw unit in vue-cli project?-Vue.js-php.cn

The followingvue.js columnwill 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.

How to use vw unit in vue-cli project?

Installation
Command line input:

yarn add postcss-px-to-viewport

Copy after login

npm i postcss-px-to-viewport -save -dev

Copy after login

Configuration## In#package.json, add code in postcss:

"postcss": { "plugins": { "autoprefixer": {}, "postcss-px-to-viewport": { "viewportWidth": 750, "minPixelValue": 1 } } },

Copy after login

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 scenario

vue-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/vh

Related recommendations:

2020 front-end vue interview questions summary (with answers)

vue tutorial recommendation: The latest 5 vue.js video tutorial selections in 2020

For more programming-related knowledge, please visit:

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!