Converting rem width and height does not take effect. The minimum chrome font size is 12px and chrome12px.

Converting rem width and height does not take effect. The minimum chrome font size is 12px and chrome12px.

At present, many front ends use rem to Unit Element and font size.

The general setting is

Html {

Font-size: 62.5%;

}

Conversion source 1rem = 16px

10/16 = 0.625

In this way, 10px is equal to 1rem.

1.4rem = 14px (this is a good conversion)

1.6rem = 16px (this is a good conversion)

One problem in chrome is that when the font size is smaller than 12px, all of them press 12px.

 

But we may encounter problems in calculating the width and height of elements.

For example, the width of a div is 100px and the height is 100px.

According to our original thought, width: 10rem & height: 10rem

But in reality, we did not achieve our expectation. Actually, width: 120px (width: 10rem) & height: 120px (height: rem)

How is it possible .....

There is no problem with the font size. Why is the width and height not good .....

 

The reason is that the smallest chrome font is 12px, which has been mentioned just now ,..

We set font-size: 62.5% in html, (= 10px), which is actually = 12px

 

Now we know the reason. You can set it like this.

Set 62.5% * 12

Divide the original value by 2

For example

Html {

Font-size: 125%;

}

Div {

Font-size: 0.8rem;/* Actual value: 16/10/2 = 0.8 */

Width: 5rem;/* Actual value: 100/10 Px/2 = 5 */

}

 

What if arithmetic is not good?

We can set to use 100 for conversion.

Html {

Font-size: 625%;

}

Div {

Font-size: 0.16rem;/* Actual value: 16/100 = 0.16 */

Width: 1rem;/* Actual value: 100/100 x = 1 */

}

 

This is similar to the 62.5% conversion, that is, the conversion from division 10 to division by 100.