Maison > Article > interface Web > 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 = 16px10/16 = 0,625Donc 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 2Par exemplehtml{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 convertirhtml{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 100Ce 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!