Home > Web Front-end > Vue.js > body text

How to use vw unit in vue-cli project?

青灯夜游
Release: 2020-11-17 17:58:16
forward
2363 people have browsed it

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.

How to use vw unit in vue-cli project?

Installation
Command line input:

yarn add postcss-px-to-viewport
Copy after login

or

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!

Related labels:
source:cnblogs.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template