Beispiel für die Anpassung von rem an mobile Geräte

Vorwort

Überprüfung und Zusammenfassung von REM-Anpassungslösungen für mobile Endgeräte

Wie benutzt man rem

Die Berechnung der Rem-Einheit bezieht sich auf die Schriftgröße des Stammknotens von HTML. Wenn sich die Schriftart des Stammknotens ändert, wird auch die vom Layout referenzierte Rem-Seite entsprechend skaliert. Dies ist die Essenz des Rem-Layouts.

1. Ändern Sie dynamisch den Schriftgrößenwert von HTML

Fast jeder Browser initialisiert die Schriftgröße von HTML auf 16px. Wenn wir sie dynamisch ändern möchten, können wir 16px vorübergehend als Anfangswert der von rem angepassten Schriftgröße des Stammknotens festlegen.

Wie kann man also die dynamische Modifikation anpassen?

Angenommen, die Breite des Designs beträgt 750 Pixel, dann legen wir fest, für das Layout die Einheit 1rem = 16 Pixel zu verwenden. Wie können wir dies anpassen?

Die Breite des iPhone-Simulators in Chrome beträgt 375 Pixel, was genau der Hälfte des Designentwurfs entspricht. Wir können im Kopf rechnen: 1rem sollte zu diesem Zeitpunkt der Hälfte der Schriftgröße des HTML-Knotens zum Zeitpunkt der Initialisierung entsprechen, d. h. newFontSize = 16/2 = 8 Pixel. Ist das nicht auf halb und halb angepasst?

Daraus ergibt sich die Formel: Breite des Designentwurfs/16px = anzupassende Gerätebreite/8px. Man erkennt, dass die neue Schriftgröße proportional zur aktuellen Gerätebreite und der Breite des ursprünglichen Designentwurfs skaliert wird.

Schließlich newFontSize = 16px * anzupassende Gerätebreite / ursprüngliche Designbreite

(Funktion(doc, win) {
  var resizeEvt =
      "Orientierungsänderung" im Fenster? "Orientierungsänderung" : "Größe ändern",
    setRemResponse = Funktion() {
      var vM = 750;
      var vfontSize = 16;
      var html = doc.documentElement;
      var neueSchriftgröße = (vSchriftgröße * html.clientWidth) / vM;
      html.style.fontSize = neue Schriftgröße + "px";
    };
  doc.addEventListener("DOMContentLoaded", setRemResponse, false);
  win.addEventListener(resizeEvt, setRemResponse, false);
})(Dokument, Fenster);

2. Tatsächliche Nutzung

Konvertieren Sie die gemessenen BTN-Schaltflächenstile von px in rem

.btn {
  Breite: 699px; /* 699/16 => 43,6875rem; */
  Höhe: 90px; /* 90/16px => 5,625rem; */
  Hintergrund: rgba(90, 173, 246, 1);
  Rahmenradius: 6px; /* 6/16=> 0,375rem; */
}

Die Berechnung ist zu umständlich. Verwenden Sie SCSS, um Funktionen anstelle des Berechnungsprozesses zu definieren.

@function pxToRem($initialStyle) {
  @return $initialStyle/16 * 1rem;
}

Dann wird das obige CSS wie folgt umgeschrieben:

.btn {
  Breite: pxToRem(699);
  Höhe: pxToRem(90);
  Hintergrund: rgba(90, 173, 246, 1);
  Rahmenradius:pxToRem(6);
}

Ergänzung: Das Plug-In cssrem von vscode unterstützt Berechnungen, um die in CSS und SCSS eingegebenen Pixel in REM-Einheiten umzurechnen. Die Standardschriftgröße ist auf 16 Pixel eingestellt.

Änderungen der Rechenmethode, Kopfrechnen rem

1. Einfache Analyse

Wenn wir den vorherigen Abschnitt analysieren, erhalten wir schließlich newFontSize = 16px * anzupassende Gerätebreite / ursprüngliche Designbreite

Es ist sehr umständlich, bei jeder Berechnung durch 16 zu teilen. Wenn wir die Schriftgröße des ursprünglichen HTML-Stammknotens ändern, damit sie einfacher zu berechnen ist, da sie letztendlich als Divisor dient, welchen Wert sollte sie dann annehmen? Ist 100 praktischer? Das stimmt!

const oHtml = Dokument.Dokumentelement;
const clientWidth = oHtml.clientWidth;
var vM = 750;
var vfontSize = 100;
// Mobilgerät oHtml.style.fontSize = (vfontSize * clientWidth) / vM + "px";

2. Tatsächliche Nutzung

Wandeln Sie px mithilfe des bekannten btn von oben in rem um und berechnen Sie das Ergebnis im Kopf.

.btn {
  Breite: 699px; /* 699/100 => 6,99rem; */
  Höhe: 90px; /* 90/100 => 0,9rem; */
  Hintergrund: rgba(90, 173, 246, 1);
  Rahmenradius: 6px; /* 6/100=> 0,06rem; */
}

Ich muss sagen, es ist wirklich praktisch, SCSS zu haben!

@Funktion reduziert100($initialStyle) {
  @return $initialStyle/100 * 1rem;
}

Dann wird die obige CSS-Funktionsmethode wie folgt umgeschrieben:

.btn {
  Breite: reduziert100(699);
  Höhe:reduziert100(90);
  Hintergrund: rgba(90, 173, 246, 1);
  Rahmenradius:reduziert100(6);
}

Wie wäre es, Rem stellt sich als so einfach heraus! ! !

Hilfsfunktionen

Sie können eine der oben genannten Methoden wählen. Schließlich ist die Ausführungseffizienz von JavaScript mittlerweile nicht schlecht!

(Funktion (doc, win) {
  var resizeEvt =
      "Orientierungsänderung" im Fenster? "Orientierungsänderung" : "Größe ändern",
    setRemResponse = Funktion() {
      var vM = 750;
      var vfontSize = 16;
      var html = doc.documentElement;
      var neueSchriftgröße = (vSchriftgröße * html.clientWidth) / vM;
      html.style.fontSize = neue Schriftgröße + "px";
    };
  doc.addEventListener("DOMContentLoaded", setRemResponse, false);
  win.addEventListener(resizeEvt, setRemResponse, false);
})(Dokument, Fenster);

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.