Eine kurze Diskussion über die perfekte Anpassungslösung für das mobile Vue-Terminal

Eine kurze Diskussion über die perfekte Anpassungslösung für das mobile Vue-Terminal

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:
1. Legen Sie rootValue entsprechend der Breite des Designs geteilt durch 10 fest. Angenommen, das Design ist 375, dann wird rootValue auf 37,5 festgelegt.
2. propList wird verwendet, um die Eigenschaften festzulegen, die konvertiert werden müssen. Dabei bedeutet *, dass alle Eigenschaften konvertiert werden.

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:
  • Vue verwendet REM, um eine mobile Bildschirmanpassung zu erreichen
  • Vue ist die beste Lösung für die mobile Anpassung (getestet und effektiv)
  • Detaillierte Erläuterung der Anpassung von Vue-Mobilprojekten (am Beispiel von Mint-UI)
  • Detaillierte Erläuterung der mobilen Anpassungslösung von Vue
  • Detaillierte Erklärung der mobilen Vue-Bildschirmanpassung
  • Lösen Sie das Problem der mobilen Anpassung von Vue
  • Detaillierte Erläuterung des adaptiven Anpassungsproblems des Vue-Mobilterminals

<<:  Unterscheidung zwischen Linux-Hardlinks und Softlinks

>>:  Wie implementiert MySQL ACID-Transaktionen?

Artikel empfehlen

So erhöhen Sie die Ladegeschwindigkeit von HTML-Seiten

(1) Reduzieren Sie HTTP-Anfragen. (Ressourcendate...

Detaillierte Erläuterung der Verwendung der Vue3-Statusverwaltung

Inhaltsverzeichnis Hintergrund Bereitstellen / In...

Allgemeine Schreibbeispiele für MySQL- und Oracle-Batch-Insert-SQL

Inhaltsverzeichnis Zum Beispiel: Allgemeines Schr...

Umfassende Analyse des MySql-Master-Slave-Replikationsmechanismus

Inhaltsverzeichnis Master-Slave-Replikationsmecha...

So konfigurieren Sie Linux CentOS für die regelmäßige Ausführung von Skripten

Oft möchten wir, dass der Server regelmäßig ein S...

Ubuntu kompiliert Kernelmodule und der Inhalt wird im Systemprotokoll angezeigt

Inhaltsverzeichnis 1.Linux-Anmeldeschnittstelle 2...

Stellen Sie die Nginx+Flask+Mongo-Anwendung mit Docker bereit

Als Server wird Nginx verwendet, als Datenbankunt...

Lösung für den Fehler bei der MySQL-Remoteverbindung

Ich bin schon einmal auf das Problem gestoßen, da...

So starten Sie mehrere MySQL-Datenbanken auf einem Linux-Host

Lassen Sie uns heute darüber sprechen, wie Sie vi...

WeChat-Applet implementiert Sortierfunktion basierend auf Datum und Uhrzeit

Ich habe vor kurzem ein kleines Programmierprojek...

Tiefgreifendes Verständnis des Linux-Lastausgleichs LVS

Inhaltsverzeichnis 1. LVS-Lastausgleich 2. Grundl...

Vollständiger Vue-Code zur Implementierung der Single-Sign-On-Steuerung

Hier ist zu Ihrer Information eine Vue-Single-Sig...

Nginx erstellt Implementierungscode für RTMP-Liveserver

1. Erstellen Sie ein neues RTMP-Verzeichnis im Ng...