Ich habe kürzlich meine Notizen aus meinen früheren Front-End-Studien durchgesehen und festgestellt, dass ich den Aspekt der Bildschirmanpassung (rem) des mobilen Webs nicht wirklich verstehe, ich weiß nur, wie man ihn verwendet.
Notieren Sie als Nächstes einige Ihrer Gedanken zur mobilen Web-Bildschirmanpassung (REM).
Einführung in remrem stellt die Schriftgröße des Stammelements (<html>) dar. Das heißt, wenn die Schriftgröße des Stammelements 14 Pixel beträgt, dann ist 1rem = 14 Pixel
rem passt sich dem mobilen Web an AnpassungseffektAuf Bildschirmen unterschiedlicher Größe scheint die Größe desselben Elements nicht gleich zu sein, aber der Anteil der Bildschirmbreite, den sie einnehmen, ist gleich.
Code
// Im Head-Tag der HTML-Datei <script type=text/javascript> (function(){ var html = document.documentElement; // Bildschirmbreite (px) abrufen var hWidth = html.getBoundingClientRect().width; // Schriftgröße des HTML-Tags auf hWidth/15 setzen html.style.fontSize = hWidth/15 + 'px'; })()</script> // In less/* Variable @r: 750/15 */@r:50rem; div { width: 100/@r;} Javascript-CodeZuerst kopieren wir 1/15 der Bildschirmgröße (px) in das Attribut „font-size“ des HTML-Tags. Zu diesem Zeitpunkt entspricht 1/15 Pixel der Bildschirmgröße (px) der Größe von 1rem auf jeder Bildschirmgröße. Das heißt: Solange auf jeder Bildschirmgröße derselbe REM-Wert für das Element festgelegt ist, nimmt das Element auf allen Bildschirmgrößen den gleichen Anteil der Bildschirmbreite ein, und der Anteil ist gleich und passt sich an alle Bildschirmgrößen.
weniger CodeJetzt müssen Sie nur noch die px-Einheit des Elements im Designentwurf in die rem-Einheit umrechnen.
Daher können wir den Designentwurf derzeit als Handybildschirm einer bestimmten Größe betrachten.
In meinem Beispiel beträgt die Breite des Designentwurfs 750 Pixel.
Daher ist 750/15 = 50 Pixel, d. h. auf einem Mobiltelefonbildschirm mit der Größe des Designentwurfs ist 1rem = 50 Pixel.
Dann definieren wir im Less-Code eine Variable @r.
Die Breite des Div wird mit 100 Pixel gemessen, da in einem Bildschirm mit der Größe des Designentwurfs 1rem = 50 Pixel ist, sodass der REM-Wert des Div 100/50 rem beträgt, also 100/@r.
Die Höhe des Div wird mit 200 Pixel gemessen, da in einem Bildschirm mit der Größe des Designentwurfs 1rem = 50 Pixel ist, sodass der REM-Wert des Div lautet: 200/50 rem, also 200/@r.
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.