Explication détaillée de la disposition de l'adaptation rem

Il existe aujourd'hui de nombreux types de téléphones mobiles, sans parler de la série iPhone, il existe d'innombrables types de téléphones Android, il est donc impossible d'écrire un ensemble de styles de mise en page pour chaque téléphone mobile. C'est également impossible, mais pour les frontaux. qui recherchent de plus en plus l'excellence. Il s'agit bien sûr de trouver une solution raisonnable. rem est utilisé pour la mise en page adaptative.

L'effet à obtenir par l'adaptation est le suivant (une simple démonstration)

Les deux div occupent la moitié de l’écran, qu’ils soient sur un grand ou un petit écran.

Bien que l'utilisation simple des pourcentages ci-dessus puisse être obtenue, les pourcentages ne peuvent pas permettre l'adaptation de la police et il est toujours difficile de convertir les pourcentages en tailles correspondantes. Parlons ensuite de notre protagoniste rem cette fois (nous nous adaptons généralement uniquement à la largeur)

Tout d'abord, rem est une unité relative par rapport à la taille fontSize de l'élément racine, c'est-à-dire que 1rem est égal à la taille fontSize du html. Ensuite, il suffit de changer la taille fontSize de l'élément html pour contrôler le. taille du rem. Ensuite, comment s'adapter aux différents écrans ? Tant que l'on s'assure que plus la largeur de l'écran est grande, plus la valeur px représentée par 1rem est grande et plus la valeur fontSize du HTML est grande. En d'autres termes, la fontSize du HTML doit être proportionnelle. à la largeur de l'écran.

Parlons de quelques concepts : le ratio de pixels de l'appareil , les pixels physiques de l'appareil , les pixels indépendants de l'appareil (parfois également appelés pixels virtuels).

Rapport de pixels de l'appareil = pixels physiques de l'appareil/pixels indépendants de l'appareil

Pixel physique de l'appareil : la plus petite unité affichée sur l'appareil

Pixels indépendants de l'appareil : unités indépendantes de l'appareil utilisées pour mesurer logiquement les pixels (dimensions CSS).

Prenons l'exemple de l'iphone6/7/8. Les pixels physiques de l'iphone6/7/8 sont de 750, ce qui correspond à la taille réelle de l'appareil, et px est une unité de pixels indépendante de l'iphone6/7/8 est un 2x. écran et sa taille CSS est de 375, le rapport de pixels de l'appareil est déjà défini lorsque l'appareil quitte l'usine. Alors, comment parvenir à l’adaptation ?

Ceci utilise le rem le plus populaire

Premièrement, en fonction des pixels physiques de l'appareil sur différents écrans, différentes tailles de px doivent être définies avec la fontSize de l'élément html.

1. Enquête des médias

 html{font-size:16px;}@écran multimédia et (min-width:240px) { html { font-size:9px }}@écran multimédia et (min-width:320px) {html {font-size:12px; ;}}Écran @media et (min-width:375px) {html{font-size:14.0625px;}}

Utilisez @media screen et (min-width:XXX) pour déterminer la taille de l'appareil, puis définissez la fontSize de HTML.

2. js définit la taille de la police HTML (solution NetEase)

 function setRem () { let htmlRem = document.documentElement.clientWidth document.documentElement.style.fontSize = htmlRem/7.5 + 'px' }setRem()

Le code ci-dessus est basé sur l'iPhone6 ​​​​​​en tant que brouillon de conception, et le résultat est le pixel réel de 1rem = 100px. Parce que le rapport de pixels de l'iPhone6 ​​​​​​est de 2, 1rem est de 50px dans l'aperçu du navigateur, ce qui signifie que le. La relation entre 1rem et la largeur de l'appareil est de 7,5 fois, la taille réelle changera si la largeur de l'appareil change de 1rem et la proportion sur l'écran ne changera pas. (La plupart des solutions sur le marché sont de ce genre)

3. Utilisez vw, vh

 html{taille de police : 10vw}

vw et vh sont de nouvelles unités relatives qui divisent la zone visuelle en 100 parties de largeur et de hauteur, similaires à la disposition en pourcentage. Cette solution ne nécessite pas l'écriture de js, mais la compatibilité est un peu mauvaise.

Ci-joint le tableau de compatibilité vw et vh

Chaque rem est relatif à la fontSize de l'élément racine, donc tout l'effort consiste à définir la fontSize de l'élément racine proportionnelle à la largeur du périphérique.

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.