Explication détaillée de l'utilisation de rem+scss pour l'adaptation sur le téléphone mobile

rem (taille de police de l'élément racine) fait référence à l'unité de taille de police par rapport à l'élément racine (c'est-à-dire l'élément html).

En supposant que la taille de police de l'élément racine est de 10 px, la taille de 5rem est de 5*10=50 px, par exemple

 html{ taille de police : 10px;}p{ largeur : 2rem; /* 2*10 = 20px;*/ marge : 1rem;}

Dans le passé, nous utilisions souvent cette page : définissez la largeur de la fenêtre d'affichage sur la largeur de l'appareil, puis sélectionnez la largeur minimale de l'appareil avec lequel nous devons être compatible (généralement 320 px). Créez des pages basées sur cette largeur minimale. Les unités utilisent px et pourcentage. Sur les appareils de largeurs différentes, la taille de la police et la taille du contenu de la page sont les mêmes. La différence est que l'écart entre le contenu sur le grand écran est plus grand que celui sur le petit écran. L’inconvénient est donc que la page ne s’affiche pas bien sur les appareils de certaines tailles.

Si nous utilisons rem pour créer la page, nous définirons différentes tailles de police sur l'élément racine en fonction des différentes largeurs de périphérique. Plus la largeur est large, plus la taille de la police est grande. Utilisez ensuite rem pour remplacer le px d'origine. De cette façon, la taille de la police, la taille du contenu et la paire s'agrandissent à mesure que la largeur de l'écran augmente.

Tout d’abord, js définit la taille de police par défaut du HTML (écrite dans l’en-tête du HTML)

 <script type=text/javascript> var bodyElement = document.documentElement || document.body, RC = { w: 750, h: 1206 }, //Largeur et hauteur du brouillon de conception par défaut GC = { w: document.documentElement.clientWidth | window.innerWidth || screen.width, h : document.documentElement.clientHeight || screen.height }; function setFontSize(){ var rightSize = parseFloat((RC.w / RC.h).toFixed(1)), currentSize = parseFloat((GC.w / GC.h).toFixed(1)) , lastHTMLSize = 16, // La valeur par défaut 16 est due au fait que la taille de police par défaut du HTML est 16px html = document.getElementsByTagName(html)[0]; if(rightSize > currentSize){ // Écran long lastHTMLSize = 16; }else if(rightSize < currentSize){ // Écran large lastHTMLSize = (RC.h / GC.h * GC .w) / RC.w * 16; } html.style.fontSize = GC.w / lastHTMLSize + 'px'; } setFontSize();</script>

Définir le fichier scss px sur rem

 // La valeur par défaut 16 est la taille de police par défaut du HTML // La valeur par défaut 750 est la largeur par défaut du brouillon de conception // $n est la distance mesurée à partir du brouillon de conception @charset UTF-8 @function rem($n) { @return $n / (750/16)+rem;}

Modifier les fonctions pour un appel facile :

 @function getTop($n) { @return ($n - 1206 / 2) / (750 / 16)+rem;} @function getLeft($n) { @return ($n - 750 / 2) / (750 / 16)+rem;}@function getRight($n) { @return ($n - 750) / 2) / (750 / 16)+rem;}@mixin center($left, $top) { //Changer la position : absolu ; gauche : 50 % ; top : rem($top margin : 0 0 0 getLeft($left) ;}@ mixin centerlt($left, $top) { //Position centrale haut et bas, gauche et droite : absolue gauche : 50 % haut : 50 % ; getLeft($left);}@mixin centerrt($right, $top) { //Position centrale haut et bas, gauche et droite : absolue droite : 50 % haut : 50 % ; ($right) 0 0;}@mixin middlert($right, $top) { //Changement de position vers le haut, le bas, le centre et la droite : absolu right : rem($right margin : getTop(); $haut) 0 0 0;}@mixin centerb($left, $bottom) { //Changer la position : absolu ; gauche : 50 % ; rem($bottom); marge : 0 0 0 getLeft($left); leftTop($left, $top) { //Changer la gauche en position supérieure : absolue; left: rem($left top: rem($top);}@mixin rightTop($right); $top) { //Changer la droite en position : absolue; right: rem($right); top: rem($top);}@mixin leftBottom($left, $bottom) { //Changer la droite en position : absolue; gauche : rem($gauche en bas) : rem($en bas);}

Appelez la fonction ci-dessus (la distance en largeur et en hauteur peut être mesurée en ps pour mesurer la distance réelle. La largeur de dépouille de conception par défaut est de 750) :

 .page1-img1{ largeur : rem(473); hauteur : rem(173); @include centerlt(139, 767);}

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.