So konfigurieren Sie die mobile Anpassung von lib-flexible+rem in vue-cli

Dieses Mal zeige ich Ihnen, wie Sie die mobile lib-flexible+rem-Anpassung in vue-cli konfigurieren. Hinweise Ja Welche Die folgenden sind praktische Fälle, werfen wir einen Blick darauf.

Flexibel installieren

npm install lib-flexible --save

Wir stellen vor: flexibel

Fügen Sie den folgenden Code zur Projekt-Eintragsdatei main.js hinzu und führen Sie flexible

import 'lib-flexible'

ein px to rem

Verwenden Sie den px2rem-Loader des Webpacks, um px automatisch in rem umzuwandeln

Installieren Sie px2rem-loader

npm install px2rem-loader --save-dev

px2rem-Nutzung

Nach der Installation von px2rem gibt es einige Unterschiede bei der Verwendung von px. Sie können sich auf die offizielle Einführung von px2rem beziehen, die im Folgenden kurz vorgestellt wird.

Schreiben Sie px direkt und es wird nach der Kompilierung direkt in rem konvertiert ---- Verwenden Sie dies mit Ausnahme der folgenden beiden Situationen für andere Längen

Durch das Hinzufügen von /*no*/ nach px wird px nicht konvertiert, aber wird unverändert ausgegeben. ---Allgemeine Grenzen müssen dies

verwenden Durch Hinzufügen von /*px*/ nach px werden drei Codesätze entsprechend unterschiedlichen dpr generiert. ----Allgemeine Schriftarten müssen dies

verwenden Beispielcode

Vor der Kompilierung (von Ihnen selbst geschriebener Code)

.selector {
 width: 150px;
 height: 64px; /*px*/
 font-size: 28px; /*px*/
 border: 1px solid #ddd; /*no*/
}

Nach der Kompilierung (gepackter Code)

.selector {
 width: 2rem;
 border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
 height: 32px;
 font-size: 14px;
}
[data-dpr="2"] .selector {
 height: 64px;
 font-size: 28px;
}
[data-dpr="3"] .selector {
 height: 96px;
 font-size: 42px;
}

Starten Sie das Projekt neu und Sie können die Pixel problemlos für den Designentwurf verwenden.

Achtung: Fallstricke

Sie können dem Kopf von index.html kein Meta-Tag mit dem Namen viewport hinzufügen. Flexible fügt es automatisch für uns hinzu!

Update: CSS von außen importieren, die Frage, ob px2rem rem konvertieren kann

2017.12.8 Update: In praktischen Anwendungen haben wir festgestellt, dass px2rem manchmal extern importierte CSS-Dateien normal konvertieren kann, manchmal jedoch nicht. Was ist der Grund? Ich habe drei verschiedene Methoden zur Einführung von CSS getestet und festgestellt, dass die erste Methode normal konvertiert werden kann, die zweite und dritte jedoch nicht. Aus diesem Grund verstehe ich es aufgrund meiner mangelnden Kenntnisse immer noch nicht. Bitten Sie einen Meister, den Unterschied zwischen den drei Einführungsarten zu erklären.

Wenn Sie diese Methoden verstehen, müssen Sie die importLoader von cssLoader nicht konfigurieren, da die folgende Methode einfacher zu steuern ist, ob das extern importierte CSS in REM konvertiert werden muss. Eine Änderung der importLoaders kann dies jedoch nicht steuern, sondern Kraftumwandlung .

<style src=&#39;../assets/style.css&#39;>
 /* px2rem能正常转换 */
</style>
<style>
 /* px2rem不能正常转换 */
 @import '../assets/style.css';
</style>
<style>
 /* px2rem不能正常转换 */
 @import url('../assets/style.css');
</style>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung von vue-cli

Detaillierte Erläuterung der Verpackungs- und Konfigurationsschritte für Vue-Vorlagendateien

Wie verhindert JS, dass sich die Bilddehnung anpasst?

Das obige ist der detaillierte Inhalt vonSo konfigurieren Sie die mobile Anpassung von lib-flexible+rem in vue-cli. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!