Um das mobile Endgerät anzupassen, müssen wir uns überlegen, wie wir die Breite, Höhe und Schriftgröße aller Kästchen im Seitenlayout für unterschiedliche Größen von Handybildschirmen dynamisch ändern können.
Wir können für dieses Problem die relative Einheit rem verwenden.
Was ist Rem?
rem (Schriftgröße des Root-Elements) bezieht sich auf die Einheit relativ zur Schriftgröße des Root-Elements. Einfach ausgedrückt ist es eine relative Einheit. Setzen Sie das Attribut font-size von html, und rem ändert dynamisch die Größe von Elementen mit rem-Einheiten im gesamten Projekt entsprechend ihrer Größe.
Zum Beispiel: Wir setzen die Schriftgröße des Root-Elements auf 37,5, und wenn es dann eine Box mit einer Breite von 75 Pixel gibt, können wir die Box auf 2rem setzen.
Als nächstes müssen wir die Schriftgröße des Wurzelelements entsprechend der Bildschirmgröße dynamisch ändern
Beispielsweise gibt es eine Box mit einer Breite und einer Höhe von 2rem. Bei der Anzeige auf einem kleinen Bildschirm stellen wir die Schriftgröße auf 37,5 ein. Dann zeigt diese Box ein Quadrat von 75px * 75px. Bei der Anzeige auf einem großen Bildschirm stellen wir die Schriftgröße auf 75 Pixel ein, dann wird die Box als Quadrat von 150 Pixel mal 150 Pixel angezeigt.
Mit den obigen Grundkonzepten kommen wir zum Thema.
Führen Sie zunächst das Plug-in „css to rem“ in das Projekt ein
npm i postcss-pxtorem -D Erstellen Sie eine neue Konfigurationsdatei .postcssrc.js im Projektstammverzeichnis, der Konfigurationscode lautet wie folgt:
module.exports = {
plugins: {
// flexible配置
"postcss-pxtorem": {
"rootValue": 37.5, // 设计稿宽度的1/10
"propList": ["*"] // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
}
}
}Damit müssen wir nicht jedes Mal manuell berechnen, wie viele px in rem geschrieben werden müssen. Zum Beispiel beträgt die Breite des Designentwurfs, den wir erhalten haben, 375 Pixel (der rootValue des obigen Codes wird als 37,5 geschrieben), und darin befindet sich ein Quadrat von 375 Pixel * 375 Pixel. Wir können einfach 375px direkt schreiben, dieses Plugin berechnet automatisch die Breite und Höhe für uns zu 10rem
Wie kann man also die Schriftgröße des Root-Elements dynamisch ändern?
Ein weiteres Plugin kann eingeführt werden , lib-flexible
npm install lib-flexible --save-dev
Eingeführt in main.js
Auf diese Weise kann die Schriftgröße des Root-Elements für verschiedene Bildschirmgrößen unterschiedlich sein. Dann verwenden wir die rem-Einheit für das Seitenlayout, sodass die Boxgröße unterschiedlich ist.
Hinweis: Wenn wir eine bestimmte Länge in die Seite schreiben möchten, der Randradius beispielsweise 1px beträgt, müssen wir nur PX in Großbuchstaben verwenden.