Vorwort: Wie passt sich Vue basierend auf einem aktuellen medizinischen Mobilprojekt an unterschiedliche Bildschirmgrößen auf verschiedenen Bildschirmen an? 1. Anpassungslösung Die Vue Mobile-Lösung, die ich in diesem Projekt verwendet habe, ist eine Kombination aus amfe-flexible und postcss-pxtorem). Lassen Sie mich zunächst amfe-flexible vorstellen amfe-flexible ist ein flexibles Layoutkonfigurationsschema, bei dem hauptsächlich 1rem auf viewWidth/10 eingestellt wird. Dann gibt es diese Bibliothek postcss-pxtorem postcss-pxtorem ist ein Postcss-Plugin, das Pixeleinheiten in REM-Einheiten umwandelt. 2. Wie verwenden und konfigurieren?1. Installieren Sie amfe-flexible und postcss-pxtorem npm installiere amfe-flexible --save npm installiere postcss-pxtorem --save 2. Nach Abschluss der Installation muss es eingeführt werden, bevor es verwendet werden kann Wir müssen es in main.js importieren, um es verwenden zu können importiere „amfe-flexible“; Dieser Import ist OK 3. Dann kommen die postcss-pxtorem Konfigurationsschritte Um postcss-pxtorem zu konfigurieren, können Sie es in einer der folgenden Dateien konfigurieren: vue.config.js, .postcssrc.js und postcss.config.js. Die Gewichtung nimmt von links nach rechts ab. Wenn keine solche Datei vorhanden ist, erstellen Sie eine neue Datei. Sie müssen nur eine davon festlegen: Der Einfachheit halber habe ich den Code in vue.config.js wie folgt konfiguriert: modul.exporte = { //...andere Konfiguration CSS: { loaderOptions: { postcss: { Plugins: [ erfordern('postcss-pxtorem')({ Wurzelwert: 37,5, Eigenschaftenliste: ['*'] }) ] } } }, } Konfigurieren Sie in .postcssrc.js oder postcss.config.js wie folgt: modul.exporte = { "Plugins": { 'postcss-pxtorem': { Wurzelwert: 37,5, Eigenschaftenliste: ['*'] } } } Notiz: Mit der obigen Konfiguration können wir es im Projekt verwenden. In unserem Projekt schreiben wir beispielsweise: .login-form { Breite: 90%; Position: absolut; oben: 50 %; links: 50%; transformieren: übersetzen(-50 %, -50 %); Hintergrundfarbe: #fff; Polsterung: 20px; Box-Größe: Rahmenbox; Rahmenradius: 10px; .Titel { Position: absolut; oben: -50px; Schriftgröße: 24px; Farbe: #fff; links: 0; rechts: 0; Textausrichtung: zentriert; } } Die Ausgabe unseres Codes lautet dann wie folgt und das Plug-In hilft uns, Einheiten automatisch umzurechnen. login-wraper .login-form { Breite: 90%; Position: absolut; oben: 50 %; links: 50%; transformieren: übersetzen(-50 %,-50 %); Hintergrundfarbe: #fff; Polsterung: .53333rem; // Beachten Sie, dass dies die konvertierte Einheit „Box-Größe“ ist: Border-Box; border-radius: .26667rem; // Beachten Sie, dass dies die umgerechnete Einheit ist} Dies ist das Ende dieses Artikels über die perfekte Anpassungslösung für mobile Vue-Terminals. Weitere relevante Inhalte zur perfekten Anpassungslösung für mobile Vue-Terminals finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
<<: Unterscheidung zwischen Linux-Hardlinks und Softlinks
>>: Wie implementiert MySQL ACID-Transaktionen?
(1) Reduzieren Sie HTTP-Anfragen. (Ressourcendate...
Inhaltsverzeichnis 1.1. MySQL-Binlog aktivieren 1...
Inhaltsverzeichnis Hintergrund Bereitstellen / In...
Inhaltsverzeichnis Zum Beispiel: Allgemeines Schr...
Inhaltsverzeichnis Master-Slave-Replikationsmecha...
Oft möchten wir, dass der Server regelmäßig ein S...
Inhaltsverzeichnis 1. Doppelte Anfragen storniere...
Inhaltsverzeichnis 1.Linux-Anmeldeschnittstelle 2...
Als Server wird Nginx verwendet, als Datenbankunt...
Ich bin schon einmal auf das Problem gestoßen, da...
Lassen Sie uns heute darüber sprechen, wie Sie vi...
Ich habe vor kurzem ein kleines Programmierprojek...
Inhaltsverzeichnis 1. LVS-Lastausgleich 2. Grundl...
Hier ist zu Ihrer Information eine Vue-Single-Sig...
1. Erstellen Sie ein neues RTMP-Verzeichnis im Ng...