So verwenden Sie die REM-Anpassung in Vue

1. Entwicklungsumgebung vue
2. Computersystem Windows 10 Professional Edition
3. Wenn wir Vue zur Entwicklung mobiler Endgeräte verwenden, wird es aufgrund der Kompatibilität zu Problemen kommen. Ich möchte Ihnen zeigen, wie Sie die REM-Selbstanpassung in Vue verwenden. Ich hoffe, es wird Ihnen helfen.
4. Kommen wir ohne weitere Umschweife gleich zur Sache:

//Installieren Sie postcss-pxtorem
npm ich postcss-pxtorem -S

5. Erstellen Sie einen neuen rem-Ordner im src-Verzeichnis, erstellen Sie eine neue rem.js und fügen Sie den folgenden Code hinzu:

//Basisgröße const baseSize = 37,5
// Setze die Rem-Funktion function setRem() {
 const salepro = document.documentElement.clientWidth / 750
 // Die aktuelle Seitenbreite ist relativ zur Breite 750. Sie können sie nach Bedarf ändern.
 // Schriftgröße des Stammknotens der Seite festlegen document.documentElement.style.fontSize = (baseSize * Math.min(salepro, 2)) + 'px'
}
// setRem() initialisieren
//Reset rem beim Ändern der Fenstergröße
Fenster.onresize = Funktion () {
 setRem()
}

6. Erstellen Sie eine neue .postcssrc.js im Stammverzeichnis des Projekts und fügen Sie den folgenden Code hinzu:

modul.exporte = {
 "Plugins": {
 "postcss-pxtorem": {
  "rootValue": 37,5,
  "Eigenschaftenliste": ["*"]
 }
 }
}

Hinweis: In meiner Konfiguration ist das Verhältnis 1:1, d. h. die Breite der Designzeichnung beträgt 750px. Sie können einfach width:750px schreiben; im CSS ist keine Konvertierung erforderlich, ist das nicht großartig?

7. Importieren in main.js

importiere '@/rem/rem.js'

8. Verwenden Sie es in der Vue-Vorlage und fügen Sie dem CSS den folgenden Code hinzu:

<style lang="scss" scoped>
.um {
 Breite: 750px;
 Höhe: 100vh;
 Box-Größe: Rahmenbox;
 Hintergrundfarbe: blau !wichtig;
 .kk {
  Breite: 350px;
  Höhe: 350px;
  Hintergrundfarbe: rot;
 }
}
</Stil>

9. Das Wirkungsdiagramm sieht wie folgt aus:

10. Dies ist das Ende dieses Austauschs. Ich hoffe, er wird Ihnen hilfreich sein. Lassen Sie uns zusammenarbeiten, um die Spitze zu erreichen.

Oben finden Sie Einzelheiten dazu, wie Vue die REM-Anpassung verwendet. Weitere Informationen zur Verwendung der REM-Anpassung in Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!