J'ai récemment trié mes notes de mes précédentes études front-end et j'ai découvert que je ne comprenais pas vraiment l'aspect adaptation d'écran (rem) du Web mobile, je sais juste comment l'utiliser.
Ensuite, enregistrez certaines de vos réflexions sur l'adaptation à l'écran Web mobile (rem).
introduction au remrem représente la taille de la taille de police de l'élément racine (<html>). Autrement dit, si la taille de police de l'élément racine est de 14 px, alors 1rem = 14 px
rem s'adapte au web mobile Effet d'adaptationSur des écrans de tailles différentes, la taille d'un même élément ne semble pas être la même, mais la proportion de la largeur de l'écran qu'ils occupent est la même.
code
// Dans la balise head du fichier html <script type=text/javascript> (function(){ var html = document.documentElement; // Récupère la largeur de l'écran (px) var hWidth = html.getBoundingClientRect().width; // Définit la taille de police de la balise html sur hWidth/15 html.style.fontSize = hWidth/15 + 'px'; })()</script> // En moins/* définit la variable @r: 750/15 */@r:50rem; { width: 100/@r; code javascriptTout 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 la même valeur rem est définie sur l'élément, l'élément occupera la même proportion de la largeur de l'écran sur toutes les tailles d'écran, et la proportion sera la même, et il s'adaptera à toutes les tailles d'écran.
moins de codeIl ne vous reste plus qu'à convertir l'unité px de l'élément dans le brouillon de conception en unité rem.
Par conséquent, à l’heure actuelle, nous pouvons considérer le projet de conception comme un écran de téléphone portable d’une certaine taille.
Dans mon exemple, la largeur du brouillon de conception est de 750 px.
Par conséquent, 750/15 = 50 px, c'est-à-dire sur un écran de téléphone portable de la taille du brouillon de conception, 1rem = 50 px.
Ensuite, dans le code less, nous définissons une variable @r.
La largeur du div est mesurée à 100 px, car dans un écran avec la taille du brouillon de conception, 1rem = 50 px, donc la valeur rem du div est : 100/50 rem, soit 100/@r.
La hauteur du div est mesurée à 200 px, car dans un écran avec la taille du brouillon de conception, 1rem = 50 px, donc la valeur rem du div 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. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.