rem,em,px,vw,vh,vm in CSS

It stands for "root em" rem is only relative to the html (root) font-size.

If there is more than 3 levels of settings, better to use rem

em is relative to the font-size of its direct or nearest parent, gives the ability to control an area of a design.

Originally, the em was equal to the width of the capital. letter M, which is where its name originated.

Normally the browser default font-size is 16 px

One pixel is equal to one dot on the computer screen (the smallest division of your screen's resolution).

1 vh = 1/100 screen height 1 vw = 1/100 screen width

relative % of the parent elements.

check both View Port Height and Width, use the small one, and take the 1/100 of that value.

e.g.

View Port Height = 900 px View Port Width = 1200 px; 1 vm = 9px;

Normally,

body{
   font-size: 62.5%;
}

p{
   font-size:1 em;
}

because, common browser has default font-size value of 16px, therefore 16*0.625 = 10px; thus 1 rem = 10px, better for the computation.

Chrome has the default minimal font-size 12 px, therefore, even we set as above, here 1rem = 12 px

puddlejumper26 / blogs