Analyse du problème selon lequel la largeur et la hauteur du rem ne prennent pas effet

De nombreux frontaux utilisent désormais rem pour unifier l'élément et la taille de la police

Le paramètre général est

html{

font-size:62.5%;

}

Source de conversion 1rem = 16px

10/16 = 0,625

Donc 10px est égal à 1rem

1,4rem = 14px (Ceci est une très bonne conversion)

1,6rem = 16px (C'est une bonne conversion)

Il y a un problème dans le navigateur Chrome qui fait que les polices inférieures à 12px sont toutes converties en 12px

mais il y aura un problème lorsque nous calculerons la largeur et la hauteur de l'élément

Par exemple, la largeur de un div faisait à l'origine 100px et la hauteur était de 100px

Selon nos pensées originales, largeur : 10rem & hauteur : 10rem

Mais en réalité , cela n'a pas répondu à nos attentes. C'était vraiment width: 120px (width :10rem) && height: 120px(height:rem)

Je suis complètement confus, comment est-ce possible. . . . . .

Il n'y a pas de problème avec la taille de la police, mais pourquoi la largeur et la hauteur ne fonctionnent-elles pas ? . . . .

La raison est que la taille minimale de la police de Chrome est de 12 px, comme mentionné tout à l'heure. .

Nous définissons la taille de la police en HTML : 62,5 %, (= 10px) la valeur réelle est =12px

À l'heure actuelle, nous connaissons la raison et pouvons la définir comme ça

Mettez 62,5% * 12

Puis divisez la valeur d'origine par 2

Par exemple

html{

font- size :125%;

}

div{

font-size : 0,8rem /*Valeur réelle : 16px Comment est-ce arrivé le 16/10/2= 0,8*/

largeur : 5rem ; /*Valeur réelle : 100px Comment se fait-il que 100/10/2=5*/

}

Que faire si l'arithmétique n'est pas très bonne

Nous pouvons définir l'utilisation de 100 pour convertir

html{

font-size:625%;

}

div{

font-size : 0.16rem /*Valeur réelle : 16px Comment est-il arrivé à 16/100=0.16*/

width: 1rem; / *Valeur réelle: 100px Comment 100/100=1*/

}

Ceci est similaire à la conversion de 62,5 %, c'est-à-dire , diviser par 10 devient Divisé par 100

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!