Analysis on the problem that the width and height of rem do not take effect

Many front-ends now use rem to unit elements and font sizes

The general setting is

html{

font-size:62.5%;

}

Conversion source 1rem = 16px

10/16 = 0.625

So 10px is equal to 1rem

1.4rem = 14px (This is very Good conversion)

1.6rem = 16px (This is good conversion)

There is a problem in the chrome browser that all fonts smaller than 12px will be converted to 12px

But we will have problems when calculating the width and height of elements

For example, the width of a div was originally 100px and the height was 100px

According to our original thoughts width: 10rem & height: 10rem

But in reality it did not meet our expectations. It was really width: 120px (width :10rem) && height: 120px(height:rem)

I’m completely confused, how is this possible. . . . .

There is no problem with the font size, but why are width and height not working? . . . .

The reason is that the minimum font size of chrome is 12px, as mentioned just now. .

We set font-size in html: 62.5%, (= 10px) the real value is =12px

Now we know the reason, we can set it like this

Put 62.5% * 12

Then divide the original value by 2

For example

html{

font-size :125%;

}

div{

font-size: 0.8rem; /*True value: 16px How did it come about 16/10/2=0.8*/

width: 5rem; /*True value: 100px How come 100/10/2=5*/

}

What to do if arithmetic is not good

We can set 100 to convert

html{

font-size:625%;

}

div{

font-size: 0.16rem; /*True value: 16px How did it come about 16/100=0.16*/

width: 1rem; / *Real value: 100px How come 100/100=1*/

}

This is almost the same as the 62.5% conversion, that is, dividing by 10 becomes Divide by 100

The above is the detailed content of Analysis on the problem that the width and height of rem do not take effect. For more information, please follow other related articles on the PHP Chinese website!