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

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

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.

Artikel empfehlen

Detaillierte Erklärung, wie Sie das automatische Beenden des Docker-Containers verhindern können

Dieser Artikel stellt kurz die Beziehung zwischen...

Tutorial zum Erstellen einer visuellen Leistungsüberwachungsplattform mit JMeter+Grafana+InfluxDB in einer Docker-Umgebung

Inhaltsverzeichnis 1. Docker installieren 2. Inst...

So verwenden Sie Lottie-Animationen in React Native-Projekten

Lottie ist eine von Airbnb entwickelte Open-Sourc...

Analysieren des MySQL-Binärprotokolls

Inhaltsverzeichnis 1. Einführung in Binlog 2. Bin...

Spezifische Verwendung globaler Variablen von node.js

Globales Objekt Alle Module können aufgerufen wer...

react-beautiful-dnd implementiert die Drag-and-Drop-Funktion für Komponenten

Inhaltsverzeichnis 1. Installation 2.API 3. reagi...

XHTML drei Dokumenttypdeklarationen

XHTML definiert drei Dokumenttypdeklarationen. Am...

Node.js+Postman zur Simulation der HTTP-Server- und Client-Interaktion

Inhaltsverzeichnis 1. Node erstellt HTTP-Server 2...

Lösung für Linux CentOS 6.5 ifconfig kann IP nicht abfragen

Kürzlich sagten einige Freunde, dass sie nach der...

Analyse der Prinzipien von Docker-Containern

Inhaltsverzeichnis 01 Was ist das Wesen eines Con...

ByteDance-Interview: So implementieren Sie mit JS die gleichzeitige Anforderungssteuerung von Ajax

Vorwort Ehrlich gesagt fühle ich mich in letzter ...

So stellen Sie Python-Crawler-Skripte unter Linux bereit und richten geplante Aufgaben ein

Letztes Jahr habe ich aufgrund von Projektanforde...

Jenkins verpackt Microservices, um Docker-Images zu erstellen und auszuführen

Inhaltsverzeichnis Umgebungsvorbereitung Start 1....

So verwenden Sie den Linux-Befehl „locate“

01. Befehlsübersicht Der Befehl „locate“ ist eige...

Analyse des Unterschieds zwischen fettgedrucktem <b> und <strong>

Wir alle Webmaster wissen, dass es bei der Optimi...