web front-end entry to the real: CSS font units: px, em, rem and%

For plotting and printing, the "unit" is important, but the page layout, the unit is the same importance, since CSS3 popularity, more support for the unit easy to use some of the (px, em, rem ... etc.), this article will sort out these common CSS units, but also help themselves in the future be able to use more handy.

"Web" and "printing" of the unit
if the unit should do the segment, the simplest can be divided into "pages" and "print" two categories, usually for CSS is only applied to the style pages, after all, really need to do printing, or will tend to be designed through the typesetting software.

Web page (units)

px: absolute units, representing each screen "point" (pixel).
em: relative units, each sub-element is multiplied by the value of the parent element px through the "multiplier."
rem: relative units, each element is multiplied by the value of the root element px through the "multiplier."
%: Relative units, each sub-element is multiplied by the value of the parent element px through the "percentage."

Web page (attribute name)

medium: in 16px (h4 preset value)
xx-small: 0.6 times (h6 preset value) of Medium
x-small: 0.75 times the medium
small: 0.8 times the medium (H5 preset value, defined as the W3C 0.89, found about 0.8)
large: 1.1 times the medium (h3 preset value, defined as the W3C 1.2, measured about 1.1)
x-large: 1.5 times (h2 preset value) of Medium
xx-large: 2 times (h1 preset value) of Medium
smaller: about 80% of the Parent
larger: about 120% of Parent

printing

pt: printer for each "point" is defined as 1 pt = 1/72 in, if 1 px = 1 pt on a 72 dpi system, but if 1 px = 0.75 pt on a 96dpi system (72/96 = 0.75).
in: inches, at 96 dpi on the system 1 in = 96 px.
cm: cm, on a 96 dpi system 1 cm = 37.795275593333 px.
mm: millimeter on a 96 dpi system 1 cm = 3.7795275593333 px.

Small partners interested in the web front end this technology can be added to our study circle, the sixth year of work, learning to share some with you to develop practical details that need attention. 767-273-102 autumn dress. From the zero-based front-end to learn how to start. Are a group of people with a dream, we may be in different cities, but we will walk together with the front tip of the tip

Example shows
the following example will show four different units, in fairness, all four examples div take the default format, change the font-size pure look any different, because the child element, if not set font-size, will automatically inherit the parent element's font-size, use should be pre-initialized the font size, the following two CSS can change the default font size to all the elements 16px, then can be individually adjusted.

web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
html{
    font-size:16px;
}

html * {
    font-size: 1rem;
}

Px 1.
px is absolutely units, so long as the number of px is set, there will be the presentation of accurate, useful for some emphasis on the precise location of the typesetting terms, as in the example shown, the font will specify how much px much.

<div style="font-size:16px;">16px
    <div style="font-size:20px;">20px
        <div style="font-size:24px;">24px
            <div style="font-size:16px;">16px
                <div style="font-size:32px;">32px</div>
            </div>
        </div>
    </div>
</div>