So implementieren Sie die Anpassung mobiler Endgeräte in vue-cli

In diesem Artikel wird hauptsächlich die Konfiguration von lib-flexible + rem basierend auf vue-cli vorgestellt, um eine Anpassung an mobile Endgeräte zu erreichen.

Flexible installieren

npm install lib-flexible --save

Flexibel einführen

Fügen Sie den folgenden Code in die Projekteintragsdatei main.js ein und führen Sie Flexible ein

import 'lib-flexible'

px to rem

Verwenden Sie den px2rem-loader des Webpacks, um px automatisch in rem zu konvertieren

Installieren Sie px2rem-loader

npm install px2rem-loader --save-dev

Konfigurieren Sie px2rem-loader

in vue Suchen Sie in der von -cli generierten Datei die folgende Datei build/utils.js und fügen Sie die Konfiguration wie unten gezeigt hinzu

Über importLoaders: Wenn Sie Fragen haben, wenden Sie sich bitte an uns Weitere Informationen finden Sie im ausführlichen und praktischen Webpack-Kampf 4-4

2017.12.8 Update-Anweisungen: Wenn Sie ImportLoader konfigurieren müssen, lesen Sie bitte die Anweisungen unten.

px2rem-Verwendung

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 , das im Folgenden einmal kurz vorgestellt wird.

Schreiben Sie px direkt und es wird nach der Kompilierung direkt in rem konvertiert ---- Verwenden Sie dies

für andere Längen. Fügen Sie danach /*no*/ hinzu px, und es wird nicht konvertiert, sondern unverändert ausgegeben. --- Im Allgemeinen müssen Grenzen dieses

verwenden, um /*px*/ nach px hinzuzufügen, wodurch drei Codesätze entsprechend unterschiedlichen dpr generiert werden. ----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.

Hinweis: Fallstricke

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

Update: Wenn CSS von außen importiert wird, besteht das Problem, ob px2rem REM konvertieren kann

Update 2017.12.8: In praktischen Anwendungen wird festgestellt, dass dies bei von außen importierten CSS-Dateien der Fall ist , manchmal kann px2rem sie normal konvertieren. Die Zeit kann nicht geändert werden. 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ührungsmethoden 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 ImportLoader kann dies jedoch nicht steuern , es wird die Konvertierung erzwingen.

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

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So lösen Sie das Problem des Router-übergreifenden Modulsprungs

Detaillierte Einführung in das chinesische Dokument von vuex

So generieren Sie eine Dropdown-Liste mit reinem JS

So verwenden Sie Dateien in Vue

So verwenden Sie das Vue-Cli-Webpack. Einführung in JQuery (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Anpassung mobiler Endgeräte in vue-cli. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!