CSS Font size units

1:px:

This should be a domestic use of more units, meaning pixels. Therefore, the visual rendering effect is related to resolution. For example, in the 1024x768 resolution to see the 12px font than 960*640 see the "small", in fact, the font pixel has not changed, so feel at high resolution to small, in low resolution to large. the default browser uses 16px rendering.

If you set the font unit to%, for example: font-size:120%, then 16px*120%=19px;

2:em:

Compared to domestic, foreign sites are more inclined to use EM, not only on the font-size, in the margin and padding, etc. will also be used, such as well-known CSS design site-css Zen Garden, http://www.csszengarden.com/. 1em=16px the size of the child element's EM is not specific, the child element's EM is calculated on the basis of the parent element, for example: The parent element is 2EM, the child element is 1em, the child element font size is 1 (child) * * (parent) =2em; the parent element is 2EM, the child element is 2EM, The child element font size is 2 (parent) * * (Child) =4em as follows:

. div2{
Font-size:2em;
}
p{
Font-size:1em;
}

3:rem:

REM is a new way of defining the font size that CSS3 appears, and its difference from EM is that REM is always relative to the HTML element (HTML), not relative to the parent element. As follows:

html{       font-size:1em;      }      . div2{        font-size:2rem;/*1 (root element) * * (OWN) =2em (actual size) */      }      p{        font-size:1rem;/*1 (root element) * * (OWN) =1em (actual size) */

　　

4:PT:

PT does not change visually as the resolution of the browser changes, it always looks the same size.

CSS Font size units