Zwei Methoden zur Implementierung des Rem-Layouts für mobile Endgeräte

Es versteht sich, dass es zwei Arten der REM-Layoutsteuerung gibt, von denen eine durch CSS-Medienabfrage erfolgt und die andere durch die Einführung von js gesteuert wird. Beide Methoden haben ihre eigenen Vorteile, aber ich verwende diese Methode trotzdem der Einführung von js zur Implementierung des REM-Layouts. Obwohl der größte Teil des aktuellen Marktes CSS-Medienabfragen zur Implementierung verwendet, werde ich hier diese beiden Methoden zusammenfassen:

Methode 1: Häufig verwendete Methode, CSS-Medienabfrage

@media only screen and (max-width: 600px), only screen and (max-device-width:400px) {
  html,body {
    font-size:50px;
  }
}
@media only screen and (max-width: 500px), only screen and (max-device-width:400px) {
  html,body {
    font-size:40px;
  }
}
@media only screen and (max-width: 400px), only screen and (max-device-width:300px) {
  html,body {
    font-size:30px;
  }
}
.box{
  border: 1rem solid #000;
  font-size: 1rem;
}

Für diese Methode kann sie nur über CSS-Dateien implementiert werden. Während des Ladevorgangs der Seite werden weniger Dateien angefordert, aber wenn zwei Die Bildschirmbreiten der Mobilgeräte unterscheiden sich nicht wesentlich. und sie liegen alle im gleichen durch die Medienabfrage festgelegten Bereich. Dann ändert sich die Textgröße auf der Seite nicht, aber die Methode zur Einführung von js ist unterschiedlich.

Methode 2: js einführen

// 需求：根据设计图的比例去动态设置不同屏幕下面对应的font-size值
// 这段JS不要添加入口函数，并且引用的时候放到最前面
// ui的大小根据自己的需求去改
// 设计图的宽度
var ui = 750;
// 自己设定的font值
var font = 40;
// 得到比例值
var ratio = ui/font;
var oHtml = document.documentElement;
var screenWidth = oHtml.offsetWidth;
// 初始的时候调用一次
getSize();
window.addEventListener('resize', getSize);
// 在resize的时候动态设置fontsize值
function getSize(){
  screenWidth = oHtml.offsetWidth;
  // 限制区间
  if(screenWidth <= 320){
    screenWidth = 320;
  }else if(screenWidth >= ui){
    screenWidth = ui;
  }
  oHtml.style.fontSize = screenWidth/ratio + 'px';
}

Mit dieser Methode zur Einführung von js können subtile Änderungen in der Textgröße und anderen Größen für Mobilgeräte unterschiedlicher Größe erzielt werden.

Verwandte Empfehlungen:

Anpassung des Rem-Layouts für die Entwicklung mobiler Seiten

Rem-Layout für mobile Seiten_html/css_WEB-ITnose

Anwendung des Rem-Layouts in JavaScript in den React_Javascript-Fähigkeiten

Das obige ist der detaillierte Inhalt vonZwei Methoden zur Implementierung des Rem-Layouts für mobile Endgeräte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!