Deux méthodes de mise en œuvre de la disposition rem du terminal mobile

Il est entendu qu'il existe deux styles de contrôle de mise en page rem, l'un via une requête multimédia CSS et l'autre via l'introduction de js. Les deux méthodes ont leurs propres avantages, mais j'aime toujours utiliser la méthode. d'introduire js pour implémenter la mise en page rem. Bien que la plupart du marché actuel utilise CSS MediaQuery pour l'implémenter, je vais résumer ici ces deux méthodes :

Méthode 1 : méthode couramment utilisée, CSS MediaQuery.

@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;
}

Pour cette méthode, elle ne peut être implémentée que via des fichiers CSS. Pendant le processus de chargement de la page, moins de fichiers sont demandés, mais si deux largeurs d'écran des appareils mobiles ne sont pas très différentes, et ils sont tous dans la même plage définie par la requête multimédia. Ensuite, la taille du texte sur la page ne changera pas, mais la méthode d'introduction de js est différente.

Méthode 2 : introduire js

// 需求：根据设计图的比例去动态设置不同屏幕下面对应的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';
}

Cette méthode d'introduction de js peut entraîner des changements subtils dans la taille du texte et d'autres tailles pour les appareils mobiles de différentes tailles.

Recommandations associées :

Principe de mise en page rem d'adaptation du développement de pages mobiles

Page mobile rem layout_html/css_WEB-ITnose

Application de la mise en page rem en JavaScript dans les compétences react_javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!