Getting to the actual front-end development: 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."

One learns there will be confusion, lack of motivation. Here's what I recommend front-end learning exchange group: 731 771 211, which is the front end of the study, if you want to create web pages cool, want to learn programming. Himself compiled a front-end 2019 the most comprehensive study materials, from the most basic HTML + CSS + JS [cool special effects, games, plug-in package design patterns] to move to the end of the project HTML5 real learning materials are finishing, gave every front-end junior partner, had wanted to learn web front-end, or change jobs, or college students, as well as work want to upgrade their skills, are welcome to join the junior partner to learn to learn.

Click: join

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.

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.

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>