Einführung in die mobile Bildschirmanpassung (rem)

In diesem Artikel wird hauptsächlich die mobile Web-Bildschirmanpassung (REM) vorgestellt. Es stellt die mobile Web-Bildschirmanpassung (rem) im Detail vor. Der Inhalt ist ziemlich gut, ich werde ihn jetzt als Referenz geben.

Vorwort

Kürzlich habe ich meine Notizen aus früheren Frontend-Studien sortiert und festgestellt, dass ich mit der Anpassung mobiler Webbildschirme nicht vertraut bin ( rem). Ich verstehe es nicht wirklich, ich weiß nur, wie man es benutzt.

Als nächstes notieren Sie einige Ihrer Gedanken zur mobilen Web-Bildschirmanpassung (rem).

rem Einführung

rem stellt die Größe der Schriftgröße des Stammelements dar (100db36a723c770d327fc0aef2ce13b1). 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

Anpassungseffekt

Auf Bildschirmen unterschiedlicher Größe sieht die Größe desselben Elements nicht gleich aus, aber der Anteil der Bildschirmbreite, den sie einnehmen, ist gleich.

Code

// 在 html 文件的 head 标签中
<script type="text/javascript">
  (function(){
    var html = document.documentElement;
    // 获取屏幕宽度（px）
    var hWidth = html.getBoundingClientRect().width;
    // 设置 html 标签的 font-size 大小为 hWidth/15
    html.style.fontSize = hWidth/15 + &#39;px&#39;;
  })()
</script>

// 在 less 中
/* 定义变量@r：750/15 */
@r:50rem; 
p {
  width: 100/@r;
  height: 200/@r;
}

Javascript-Code

Zuerst 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 Sie auf jeder Bildschirmgröße den gleichen REM-Wert für ein Element festlegen, ist der Anteil der Bildschirmbreite, den das Element einnimmt, auf allen Bildschirmgrößen gleich und der Anteil ist gleich passt sich allen Bildschirmgrößen an.

weniger Code

Jetzt müssen Sie nur noch die px-Einheit des Elements im Designentwurf in die rem-Einheit umwandeln.

Zu diesem Zeitpunkt können wir den Designentwurf also als einen Mobiltelefonbildschirm einer bestimmten Größe behandeln.
In meinem Beispiel beträgt die Breite des Designs 750 Pixel.

Also 750/15 = 50 Pixel, das heißt, auf einem Mobiltelefonbildschirm mit der Größe des Designentwurfs ist 1rem = 50 Pixel.

Dann definieren wir im Less-Code eine Variable @r.

Die Breite von p wird mit 100 Pixel gemessen, da in einem Bildschirm mit der Größe des Designentwurfs 1rem = 50 Pixel ist, sodass der rem-Wert von p lautet: 100/50 rem, also 100/ @R.

Die Höhe von p wird mit 200 Pixel gemessen, da in einem Bildschirm mit der Größe des Designentwurfs 1rem = 50 Pixel ist, sodass der rem-Wert von p lautet: 200/50 rem, also 200/ @R.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Analyse des rel-Attributs in HTML

Die Rolle von Meta in der HTML-Seite und der Cache der Seite Parsen ohne Cache-Einstellung

Das obige ist der detaillierte Inhalt vonEinführung in die mobile Bildschirmanpassung (rem). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!