Ausführliche Erläuterung von Beispielen zur dynamischen Einstellung der Schriftgröße auf mobilen Endgeräten

Ursprung von rem: Schriftgröße des Stammelements, dann ist rem eine Einheit und die Einheitengröße wird durch die Größe der Schriftgröße. Jetzt opfern Front-End-Programmierer stillschweigend ihre eigene Gesundheit, um auf jedem Bildschirm eine gesunde Webseite zu sehen, denn sie müssen nicht nur wissen, dass rem eine Einheit ist, sondern, was noch wichtiger ist, sie müssen wissen, wie Seiten unterschiedlich dargestellt werden Vorsätze. Sehr NB.

Unfallursache:
1.px-Einheit ist auf dem PC sehr beliebt, MLGB ist die gleiche 12px-Einheit kleiner. Wie Ameisen.
2. Auf dem iPhone 4 wurde es endlich auf Normal eingestellt. Als ich zu einem Telefon der Marke Chrysanthemum wechselte, war das MBD unansehnlich.
3. Ich weiß, wie man rem verwendet, aber was ist die geeignete Schriftgröße von HTML?

Okay, lasst uns diese Probleme jetzt lösen.
Bevor Sie das Problem lösen, verstehen Sie bitte einige Dinge, die Sie möglicherweise nicht wissen möchten (Warnung: Wenn Sie diese nicht verstehen, können Sie die Wahrheit nicht wissen~):
1 .Physische Pixel
Jeder Bildschirm, den wir sehen, besteht aus kleinen Partikeln (physikalischen Pixeln), die mit bloßem Auge schwer zu erkennen sind.

2. Logisches Pixel ist ein Punkt im Computerkoordinatensystem. Dieser Punkt stellt einen virtuellen Pixel dar, der vom Programm verwendet werden kann (z. B CSS-Pixel).

3. Das Gerätepixelverhältnis (Gerätepixelverhältnis) wird als DPR bezeichnet
Sein Wert spiegelt die physischen Pixel wider Die Beziehung zwischen logischen Pixeln und die Größe des DPR des Geräts kann mit der Formel berechnet werden:

DPR = 物理像素 / 逻辑像素

Nachdem Sie die oben genannten Konzepte verstanden haben, können Sie wissen, warum CSS so ist am PC geschrieben Aber es wurde kleiner, als ich auf ein Mobiltelefon umgestiegen bin? Wegen DPR, Bruder~. font-size=12px;
Ja, unser DPR auf dem Computerbildschirm ist 1, aber das Mobiltelefon ist anders, es kann 2 oder 3 sein. Es gibt immer noch Möglichkeiten, den Geräte-DPR abzurufen:
1 Verwenden Sie in JavaScript , um window.devicePixelRatio
2 zu erhalten 🎜> und führen Medienabfragen durch und nehmen einige Stilanpassungen für verschiedene DPR-Geräte vor (dies gilt nur für Webkit-basierte Browser und Webansichten). -webkit-device-pixel-ratio-webkit-min-device-pixel-ratio-webkit-max-device-pixel-ratioIch habe auch viele Artikel über das dynamische Festlegen von rem online gelesen. Hier sind einige häufig verwendete Artikel:

Verwenden Sie zunächst Medienabfragen, um die Schriftgröße von HTML festzulegen:

Zweitens verwenden Sie js, um

@media screen and (min-width: 320px) {html {font-size: 14px;}
}
 
@media screen and (min-width: 360px) {html {font-size: 16px;}
}
 
@media screen and (min-width: 400px) {html {font-size: 18px;}
}
 
@media screen and (min-width: 440px) {html {font-size: 20px;}
}
 
@media screen and (min-width: 480px) {html {font-size: 22px;}
}
 
@media screen and (min-width: 640px) {html {font-size: 28px;}
}

dynamisch festzulegen

Was ich sagen möchte, ist die letzte, die meiner Meinung nach derzeit eine bessere Implementierungsmethode ist:

!(function(doc, win) {var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {var width = docEle.clientWidth;
            width && (docEle.style.fontSize = 20 * (width / 320) + "px");
        };
     
    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);
 
}(document, window));

Verwenden Sie js, um den DPR des aktuellen Geräts zu berechnen, und legen Sie ihn dynamisch im HTML fest Tag und legen Sie dynamisch den HTML-Code fest. Verwenden Sie den CSS-Selektor, um die Schriftgröße je nach DPR unter verschiedenen DPR festzulegen (diese Methode ist sehr gut ~)
font-size

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen zur dynamischen Einstellung der Schriftgröße auf mobilen Endgeräten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!