Heutzutage gibt es viele Arten von Mobiltelefonen, ganz zu schweigen von der iPhone-Serie, und es gibt unzählige Arten von Android-Telefonen. Daher ist es unmöglich, für jedes Mobiltelefon einen Satz Layoutstile zu schreiben. Dies ist jedoch auch unmöglich, aber für Frontends die zunehmend nach Exzellenz streben Gesagt, natürlich eine vernünftige Lösung zu finden. rem wird für adaptives Layout verwendet.
Der durch die Anpassung zu erzielende Effekt ist wie folgt (einfache Demonstration):
Die beiden Divs nehmen die Hälfte des Bildschirms ein, unabhängig davon, ob sie sich auf einem großen oder einem kleinen Bildschirm befinden.
Obwohl die obige einfache Verwendung von Prozentsätzen erreicht werden kann, können Prozentsätze keine Schriftartanpassung erreichen, und es ist immer noch schwierig, Prozentsätze in entsprechende Größen umzuwandeln. Lassen Sie uns als Nächstes dieses Mal über unseren Protagonisten rem sprechen (normalerweise passen wir uns nur an die Breite an).
REM-PrinzipanalyseErstens ist rem eine relative Einheit relativ zur Schriftgröße des Stammelements, das heißt, 1rem entspricht der Schriftgröße von HTML. Als nächstes müssen wir nur die Schriftgröße des HTML-Elements ändern, um das zu steuern Größe der rem. Wie passen wir uns als Nächstes an verschiedene Bildschirme an? Solange wir sicherstellen, dass der durch 1rem dargestellte px-Wert und der FontSize-Wert von HTML proportional sind auf die Breite des Bildschirms.
Lassen Sie uns über einige Konzepte sprechen: Gerätepixelverhältnis , physische Gerätepixel , geräteunabhängige Pixel (manchmal auch virtuelle Pixel genannt).
Gerätepixelverhältnis = physische Gerätepixel/geräteunabhängige Pixel
Physisches Gerätepixel: Die kleinste auf dem Gerät angezeigte Einheit
Geräteunabhängige Pixel: Geräteunabhängige Einheiten zur logischen Messung von Pixeln (CSS-Abmessungen).
Nehmen Sie als Beispiel das iPhone 6/7/8. Die physischen Pixel des iPhone 6/7/8 sind 750, was der tatsächlichen Größe des Geräts entspricht, und px ist eine unabhängige Pixeleinheit des iPhone 6/7/8 Wenn es sich um einen Bildschirm mit einer CSS-Größe von 375 handelt, ist das Pixelverhältnis des Geräts bereits eingestellt, wenn das Gerät das Werk verlässt. Wie erreichen wir also Anpassung?
Dies verwendet das beliebteste Rem
Rem-ImplementierungsplanErstens müssen je nach den physischen Pixeln des Geräts auf verschiedenen Bildschirmen unterschiedliche Pixelgrößen mit der Schriftartgröße des HTML-Elements festgelegt werden.
1. Medienanfrage
html{font-size:16px;}@media screen und (min-width:240px) { html { font-size:9px }}@media screen und (min-width:320px) {html {font-size:12px ;}}@media screen und (min-width:375px) {html{font-size:14.0625px;}}Verwenden Sie @media screen und (min-width:XXX), um die Größe des Geräts zu bestimmen, und legen Sie dann die Schriftgröße von HTML fest
2. js legt die Schriftgröße von HTML fest (NetEase-Lösung)
Funktion setRem () { let htmlRem = document.documentElement.clientWidth document.documentElement.style.fontSize = htmlRem/7.5 + 'px' }setRem()Der obige Code basiert auf dem iPhone6 als Designentwurf und das Ergebnis ist das tatsächliche Pixelverhältnis von 1rem = 100 Pixel. Da das Gerätepixelverhältnis von iPhone6 2 beträgt, beträgt 1rem in der Browservorschau 50 Pixel Das Verhältnis zwischen 1rem und der Gerätebreite beträgt das 7,5-fache. Die tatsächliche Größe ändert sich, wenn sich die Gerätebreite um 1rem ändert, und die Proportionen auf dem Bildschirm ändern sich nicht. (Die meisten Lösungen auf dem Markt sind dieser Art)
3. Verwenden Sie vw, vh
html{font-size: 10vw}vw und vh sind neue relative Einheiten, die den visuellen Bereich in 100 Teile Breite und Höhe unterteilen, ähnlich dem prozentualen Layout. Diese Lösung erfordert kein Schreiben von js, aber die Kompatibilität ist etwas schlecht.
Nachfolgend finden Sie die VW- und VH-Kompatibilitätstabelle
Jeder Rem ist relativ zur Schriftgröße des Stammelements, sodass der gesamte Aufwand darin besteht, die Schriftgröße des Stammelements proportional zur Gerätebreite festzulegen
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.