Why rem and px come out of different sizes

problem description

in theory, the result is 80px, but why is the size different? after coming out, I took a look at it with the developer"s tool. The width and height of the div of one is 80. The width and height of the div of two is 96

.

look at the code:

   

Jan.25,2022

chrome generally has a minimum font limit. For example, mine is:

clipboard.png

you have to make sure that the font-size you set is greater than this limit, because you can't guarantee how the user's browser is set, so you usually take a larger + easy value when setting the base value of rem.


because the minimum font size supported by most browsers is 12px, if you set the 10px too small, it will be calculated according to the minimum font size 12px, the result is 8 * 12px


1rem defaults to 16px, you are free to set the size of rem. The introduction of rem is originally to solve the problem of size under different devices, itself and px is not a fixed corresponding relationship.


would like to ask whether it is your chrome version of the problem; I tried all the above possibilities, but did not have the problem you described!

Menu