Wie verwende ich die VW-Einheit im Vue-Cli-Projekt?

Die folgende vue.js-Kolumne stellt Ihnen die Verwendung von vw im vue-cli-Projekt vor – eine eher native mobile Lösung als flexibel. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Installation
Befehlszeileneingabe:

yarn add postcss-px-to-viewport

oder

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

Konfiguration
package.json, Code im Postcss hinzufügen:

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

Konfigurationselement:
"viewportWid th": 750, / /Die Breite des Entwurfsentwurfs
"unitPrecision": 3, //Die Anzahl der Stellen, die der Dezimalpunkt nach der Konvertierung von px in vw und vh beibehalten soll
"minPixelValue": 1, //Der minimale px-Wert, in den nicht konvertiert wird vw

Nutzungsszenarien

vw und vh erzeugen Effekte sowohl auf PCs als auch auf mobilen Endgeräten, im Gegensatz zu flexibel, das nur die Pixel von Geräten unter einer bestimmten Breite (denken Sie daran, dass es 750 Pixel ist) in rem umwandelt Der Entwurf ist für mobile Endgeräte, Sie haben die vollen Rechte zur Nutzung der VW-Einheit. Dies führt dazu, dass die Schriftgröße auf der Seite auf der PC-Seite zu groß ist, was entsprechend behandelt und entsprechend dem Anwendungsszenario ausgewählt werden muss
vue-cli3.0 führt lib-flexible/px2rem ein

Kompatibilität

vw/vh-Einheiten erschienen tatsächlich früher Ja, aber die Unterstützung war vorher nicht sehr gut, mit der Entwicklung von Browsern, die meisten (mehr als 92 %). Browser unterstützen bereits vw/vh

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Programmierlehre
! !

Das obige ist der detaillierte Inhalt vonWie verwende ich die VW-Einheit im Vue-Cli-Projekt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!