Introduction à l'adaptation d'écran Web mobile (rem)

Cet article présente principalement l'adaptation d'écran Web mobile (rem). Il présente l'adaptation pour écran Web mobile (rem) en détail. Le contenu est assez bon. Je vais le partager avec vous maintenant et le donner comme référence.

Avant-propos

Récemment, j'ai trié mes notes d'études frontales précédentes et j'ai découvert que je ne suis pas familier avec l'adaptation d'écran Web mobile ( rem). Je ne le comprends pas vraiment, je sais juste comment l’utiliser.

Ensuite, enregistrez certaines de vos réflexions sur l'adaptation de l'écran Web mobile (rem).

rem Introduction

rem représente la taille de la taille de police de l'élément racine (). Autrement dit, si la taille de police de l'élément racine est de 14px, alors 1rem = 14px

rem s'adapte au Web mobile

Effet d'adaptation

Sur des écrans de tailles différentes, la taille d'un même élément n'a pas la même apparence, mais la proportion de la largeur de l'écran qu'ils occupent est la même.

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

code javascript

Tout d'abord, nous copions 1/15 de la taille de l'écran (px) dans l'attribut font-size de la balise html. À ce stade, 1/15 px de la taille de l’écran (px) équivaut à la taille de 1rem sur n’importe quelle taille d’écran. Autrement dit : sur n'importe quelle taille d'écran, tant que vous définissez la même valeur rem pour un élément, la proportion de la largeur d'écran occupée par l'élément sera la même sur toutes les tailles d'écran, et la proportion sera la même, donc il s'adaptera à toutes les tailles d'écran.

moins de code

Il vous suffit désormais de convertir l'unité px de l'élément dans le brouillon de conception en unité rem.

Ainsi, à l'heure actuelle, nous pouvons traiter le projet de conception comme un écran de téléphone portable d'une certaine taille.
Dans mon exemple, la largeur du design est de 750px.

Donc, 750/15 = 50px, c'est-à-dire dans un écran de téléphone portable avec la taille du brouillon de conception, 1rem = 50px.

Ensuite, dans le code less, on définit une variable @r.

La largeur de p est mesurée à 100px, car dans un écran avec la taille du brouillon de conception, 1rem = 50px, donc la valeur rem de p est : 100/50 rem, soit 100/ @r.

La hauteur de p est mesurée à 200px, car dans un écran avec la taille du brouillon de conception, 1rem = 50px, donc la valeur rem de p est : 200/50 rem, soit 200/ @r.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Analyse de l'attribut rel en HTML

Le rôle des méta dans la page html et le cache de la page Analyse sans paramètre de cache

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!