Comment utiliser l'unité VW dans le projet vue-cli ?

La rubrique vue.js suivante vous présentera l'utilisation de vw dans le projet vue-cli - une solution mobile plus native que flexible. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Installer
Saisie de ligne de commande :

yarn add postcss-px-to-viewport

ou

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

Configurer
Dans package.json, ajoutez le code dans postcss :

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

Élément de configuration :
"viewportWidth": 750, // La largeur du brouillon de conception
" unitPrecision": 3, // Le nombre de décimales restantes après la conversion de px en vw et vh
"minPixelValue": 1, // La valeur minimale de px qui n'est pas convertie en vw

Scénarios d'utilisation

vw et vh produiront des effets à la fois sur PC et sur terminaux mobiles, contrairement à flexible qui ne convertira que les px des appareils en dessous d'une certaine largeur (rappelez-vous qu'il est de 750 px) en rem, donc si le projet de conception concerne les terminaux mobiles, Health, la pleine utilisation de l'unité vw entraînera une police de page trop grande côté PC. Cela doit être traité de manière appropriée et choisi en fonction du scénario d'application
vue. -cli3.0 introduit lib-flexible/px2rem

Compatibilité

l'unité vw/vh est en fait apparue plus tôt, mais le support n'était pas très bon avant Maintenant avec le développement. des navigateurs, la plupart (plus de 92 %) les navigateurs le prennent déjà en charge vw/vh

Recommandations associées :

Résumé des questions d'entretien de vue frontale 2020 ( avec réponses)

Recommandation du didacticiel Vue : les 5 dernières sélections de didacticiels vidéo vue.js en 2020

Pour plus de connaissances liées à la programmation, veuillez visitez : Enseignement de la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!