Beispiel für die Verwendung von rem zum Ersetzen von px in einem Vue-Projekt

Inhaltsverzeichnis

Werkzeug
Installieren Sie das Plugin
Fügen Sie dem Stammverzeichnis des Projekts eine .postcssrc.js-Datei hinzu
Hauptseite
um

Mobile Seitenanpassung, REM- und VW-Anpassungslösungen

Grundlegender Punkt: rem ist relativ zur Schriftgröße des Stammknotens. px ist also nicht erforderlich;
Stammschriftart: Schriftgröße in px;
px: Betrachten Sie es einfach als cm (Zentimeter);
Benchmark: 750 Designentwürfe (im Allgemeinen liefern UI-Designer 750 Designentwürfe);

Werkzeug

vue-cli: Verwenden Sie Scaffolding, um Vue-Frontend-Projekte zu erstellen
postcss: postcss ist ein Tool, das JS-Plug-ins verwendet, um Ihnen bei der Konvertierung von CSS-Stilen zu helfen. Hier ersetzen wir beispielsweise 16px in Ihrer Datei durch 1rem (die Stammgröße beträgt standardmäßig 16px); auf diese Weise müssen Sie es nicht selbst berechnen!
cssrem: hilft Ihnen hauptsächlich dabei, px (px im UI-Designentwurf) in entsprechendes rem umzuwandeln
Dann: Sie müssen auch JS-Code verwenden, um die Schriftgröße dynamisch zu berechnen, die das Stammverzeichnis haben soll. Wie auch immer, es ist nur ein Stück JS-Code, um die Bildschirmbreite dynamisch zu ermitteln

Installieren Sie das Plugin

npm und Postcss, Postcss-pxtorem, Postcss-Loader, Postcss-Import, Postcss-URL

Fügen Sie es dann zu index.html hinzu

<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1, Maximalmaßstab=1">

Fügen Sie dem Stammverzeichnis des Projekts eine .postcssrc.js-Datei hinzu

modul.exporte = {
    "Plugins": {
      "postcss-import": {}, //Wird für @import verwendet, um CSS-Dateien zu importieren"postcss-url": {}, //Pfad zum Einführen von CSS-Dateien oder Node_Modules-Dateien"postcss-aspect-ratio-mini": {}, //Wird verwendet, um das Seitenverhältnis von Elementcontainern zu verarbeiten"postcss-write-svg": { utf8: false }, //Wird verwendet, um die 1px-Lösung für mobile Endgeräte zu verarbeiten. Dieses Plug-In verwendet hauptsächlich Rahmenbilder und Hintergründe, um 1px-bezogene Verarbeitungen durchzuführen.
      "postcss-cssnext": {}, //Dieses Plug-in ermöglicht uns die Nutzung zukünftiger CSS-Funktionen und führt für diese Funktionen die entsprechende Kompatibilitätsverarbeitung durch.
      "postcss-px-to-viewport": { //Konvertiert px-Einheiten in Viewport-Einheiten wie vw, vh, vmin oder vmax. Es ist auch eines der Kern-Plugins der vw-Anpassungslösung.
          viewportWidth: 750, //Breite des AnsichtsfenstersviewportHeight: 1334, //Höhe des AnsichtsfenstersunitPrecision: 3, //Die Anzahl der Dezimalstellen, um px in den Ansichtsfenster-Einheitswert umzuwandelnviewportUnit: 'vw', //Geben Sie den zu konvertierenden Ansichtsfenster-Einheitswert anselectorBlackList: ['.ignore', '.hairlines'], //Geben Sie die Klasse an, die den Ansichtsfenster-Einheitswert nicht umwandelt. Dieser kann angepasst und unendlich hinzugefügt werdenminPixelValue: 1, //Kleiner oder gleich 1px wird nicht in die Ansichtsfenster-Einheit umgewandeltmediaQuery: false //Erlaube px in Medienabfragen
      },
      "postcss-viewport-units":{}, // Passt vw, vh, vmin und vmax an. Dies ist ein wichtiges Plugin zur Implementierung des vw-Layouts. "cssnano": { // Wird hauptsächlich zum Komprimieren und Bereinigen von CSS-Code verwendet. In Webpack ist cssnano mit css-loader gebündelt, Sie müssen es also nicht selbst laden.
          Vorgabe: „advanced“, //Autoprefixer wiederholen: false, //Sowohl cssnext als auch cssnano haben einen Autoprefixer. Tatsächlich wird nur einer benötigt, also löschen Sie den Standard-Autoprefixer und setzen Sie den Autoprefixer in cssnano auf false.
          "postcss-zindex": false //Solange dieses Plugin aktiviert ist, wird der Z-Index-Wert auf 1 zurückgesetzt
       } 
    }
  }

Wenn Sie zu verschiedenen Bildschirmgrößen wechseln, müssen Sie die Schriftgröße des Stammverzeichnisses dynamisch ändern. Fügen Sie ein einfaches JS in den Kopf ein: Erstellen Sie ein neues shipei.js im öffentlichen Verzeichnis und fügen Sie dieses JS dann in den Kopf von index.html ein.

//shipei.js
(Funktion() {
   Funktion autoRootFontSize() {
       document.documentElement.style.fontSize = Math.min(screen.width,document.documentElement.getBoundingClientRect().width) / 750 * 32 + 'px';
         // Nehmen Sie den Mindestwert von screen.width und document.documentElement.getBoundingClientRect().width; dividieren Sie durch 750, multiplizieren Sie mit 32; wenn Sie es richtig verstehen, sind das 32 Pixel der Originalgröße von 750; wenn die Bildschirmgröße 375 Pixel beträgt, dann beträgt die Schriftgröße 16 Pixel; das heißt, die Größe der Stammschriftgröße ändert sich direkt proportional zur Bildschirmgröße! Ist es nicht einfach?}
   window.addEventListener('Größe ändern', autoRootFontSize);
   autoRootFontSize();
})();

Hauptseite

<!DOCTYPE html>
<html lang="">
  <Kopf>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1, Maximalmaßstab=1">
    <link rel="stylesheet" href="/public.css" rel="externes nofollow" type="text/css">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="externes Nofollow" >
    <Titel><%= htmlWebpackPlugin.options.title %></Titel>
    <script src="/shipei.js" type="text/javascript" charset="utf-8"></script>
  </Kopf>
  <Text>
    
    <div id="app"></div>
    <!-- erstellte Dateien werden automatisch eingefügt -->
  </body>
</html>

Beachten Sie, dass Sie das Anfangsverzeichnis für öffentlich abgelegte Elemente nicht angeben müssen. Wenn das Gerüst verpackt ist, wird es im öffentlichen Ordner danach gesucht.

um

getBoundingClientRect().width ruft tatsächlich den Abstand zwischen der rechten Seite des übergeordneten Elements und dem Browserursprung (0,0) und der linken Seite des übergeordneten Elements ab, d. h. die Breite des übergeordneten Elements + 2 Polsterung + 2 Ränder.
Zu diesem Zeitpunkt entspricht die Clientbreite der Breite des übergeordneten Elements + 2*Polsterung, abzüglich der Breite des Rahmens.
Wenn der untergeordnete Inhalt nicht ausgeblendet ist, d. h. der Überlauf automatisch erfolgt, bleibt die Breite des ersteren diese Zahl, da das übergeordnete Element das Boxmodell nicht anpasst. Die Breite des letzteren ist die oben ermittelte Breite abzüglich der Breite der Bildlaufleiste (17px).

<!DOCTYPE html>
<html>
    <Kopf>
        <meta charset="utf-8">
        <Titel></Titel>
        <style type="text/css">
            *{
                Rand: 0;
                Polsterung: 0;
            }
        </Stil>
    </Kopf>
    <Text>
        <div id="divParent" style="Hintergrundfarbe: #aaa; Polsterung: 8px; Rahmen: durchgezogen 7px #000; Höhe: 200px; Breite: 500px; Überlauf: ausgeblendet;">
                <div id="divDisplay" style="Hintergrundfarbe: #0f0; Rand: 30px; Polsterung: 10px;
                    Höhe: 400px; Breite: 600px; Rahmen: durchgehend 3px #f00;">
                </div>
            </div>
    </body>
</html>
<Skripttyp="text/javascript">
    /* 
     getBoundingClientRect().width ruft tatsächlich den Abstand zwischen der rechten Seite des übergeordneten Elements und dem Browserursprung (0,0) und der linken Seite des übergeordneten Elements ab, d. h. die Breite des übergeordneten Elements + 2 Polsterung + 2 Ränder.
     Zu diesem Zeitpunkt entspricht die Clientbreite der Breite des übergeordneten Elements + 2*Polsterung, abzüglich der Breite des Rahmens.
     Wenn der untergeordnete Inhalt nicht ausgeblendet ist, d. h. der Überlauf automatisch erfolgt, bleibt die Breite des ersteren diese Zahl, da das übergeordnete Element das Boxmodell nicht anpasst. Die Breite des letzteren ist die oben ermittelte Breite abzüglich der Breite der Bildlaufleiste (17px). Das Beispiel sieht wie folgt aus:
     */
     var divP = document.getElementById('divParent');
            var divD = document.getElementById('divDisplay');
    
            var Clientbreite = divP.Clientbreite;
            var getWidth = divP.getBoundingClientRect().width;
            divD.innerHTML += 'Clientbreite: ' + Clientbreite + '<br/>';
            divD.innerHTML += 'getWidth: ' + getWidth + '<br/>';
</Skript>

Das Ergebnis ist eine Clientbreite von 516, die als Inhaltsbreite + 2 Polsterung berechnet wird.
getWidth (das heißt getBoundingClientRect().width) umfasst Inhaltsbreite + 2Padding + 2Border
Schritt 5: Konvertieren Sie die Pixel im Designentwurf in Rem-Einheiten: Installieren Sie das CSSREM-Plugin (im Plugin-Markt):
Gehen Sie dann zu Datei-->Einstellungen-->Einstellungen, suchen Sie nach cssrem und stellen Sie die Stammschriftgröße auf 16 ein.

Dies ist das Ende dieses Artikels über das Implementierungsbeispiel zur Verwendung von rem zum Ersetzen von px in Vue-Projekten. Weitere relevante Vue-Rem-Inhalte zum Ersetzen von px finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:

Über das Problem der Verwendung von PostCSS-PXTOREM durch Vue für die mobile Anpassung
Spezifische Methode zur Verwendung von postcss-pxtorem in vue3.0
Detaillierte Erläuterung der Probleme bei der Verwendung von px2rem in Vue-cli3.X
Anpassung des px2rem-Beispielcodes in Vue
So konvertieren Sie px in einem Vue-Projekt automatisch in rem
Detaillierte Erklärung der Vue px-zu-rem-Konfiguration

<<: Lernen Sie die Ausführungsreihenfolge von SQL-Abfragen von Grund auf

>>: Linux (Center OS7) installiert JDK, Tomcat und MySQL, um eine Ausführungsumgebung für Java-Webprojekte zu erstellen.

Native JS implementiert einen sehr gut aussehenden Zähler

Artikel empfehlen

So installieren Sie Phabricator mit Docker

Ich verwende hier das Ubuntu 16.04-System. Instal...

Führen Sie die Schritte zur Installation der Boost-Bibliothek unter Linux aus

Vorwort Die Boost-Bibliothek ist eine portable, m...

Lösen Sie das Problem, dass dem Benutzer „root“@„%“ der Zugriff auf die Datenbank „xxx“ verweigert wurde, nachdem eine Datenbank in MySQL erstellt wurde.

Vorwort Ich hatte kürzlich ein Problem bei der Ar...

Beispiel für die Verwendung von rem zum Ersetzen von px in einem Vue-Projekt

Inhaltsverzeichnis

Werkzeug

Installieren Sie das Plugin

Fügen Sie dem Stammverzeichnis des Projekts eine .postcssrc.js-Datei hinzu

Hauptseite

um

Native JS implementiert einen sehr gut aussehenden Zähler

Docker-Container-Protokollanalyse

Tiefgreifendes Verständnis der MySQL-Selbstverbindung und Join-Assoziation

Der Unterschied zwischen den vier Dateierweiterungen .html, .htm, .shtml und .shtm

Das automatische Porterkennungsskript von Zabbix Redis gibt das JSON-Format zurück

MySQL-Zeittypauswahl

Nginx-Konfiguration und -Kompatibilität mit der Codeanalyse der HTTP-Implementierung

MySQL-Beispiel für die Konvertierung von Spalten in Zeilen und die Gruppierung nach Jahr und Monat

Vue implementiert eine Wettervorhersagefunktion

So verwenden Sie Nginx als Load Balancer für MySQL

Artikel empfehlen

So installieren Sie Phabricator mit Docker

Führen Sie die Schritte zur Installation der Boost-Bibliothek unter Linux aus

Lösen Sie das Problem, dass dem Benutzer „root“@„%“ der Zugriff auf die Datenbank „xxx“ verweigert wurde, nachdem eine Datenbank in MySQL erstellt wurde.

So verwenden Sie Nginx zur Verwaltung einer domänenübergreifenden Vue-Entwicklungsumgebung

Einrichten von VMware vSphere in VMware Workstation (Grafisches Tutorial)

So zeigen Sie den Speicherort von MySQL-Datendateien an

Detaillierte Erläuterung der häufig verwendeten Filter von Tomcat

Tutorial zum Erstellen eines CA-Zertifikats unter Linux Centos8

Tutorial zur Installation von phpMyAdmin unter Linux centos7

Detaillierte Erklärung der Lösung des Problems des Zusammenführens von Zeilen und Spalten in Tabellen in HTML

Detailliertes Beispiel für die Verwendung von Typescript zum Einkapseln von Axios in Vue3

So beheben Sie Dateisystemfehler in Linux mit „fsck“

Analyse des Konfigurationsprozesses der Nginx-HTTP-Integritätsprüfung

Der visuelle Designpfad der Website sollte den Benutzergewohnheiten entsprechen

Vollständige Analyse des Vue-Diff-Algorithmus