Px,em and REM details of mobile development

PX: Represents absolute pixel value, 1px is 1 pixel size

EM: About EM, there is information on the Internet is about the parent element, but in fact, the personal feeling that this is wrong, in fact, the size of the EM is based on their own font-size determined, and only the normal situation of the element inherits the parent element of the Font-size

REM: Refers to the size of the root element, such as the size of the element is 16px (browser default font-size), then 1rem is the size of 16px

As an example:

Let's write a piece of code first:

    class='div1'>        class='div2'> </div>    </div>

        . div1{            width:100px;            height:100px;            Font-size:16px;        }        . div2{            width:1em;            Height:1em;            background:red;        }    

The above code, we run in the browser will get results, div2 width and height of 16px, which is now the value of DIV2 element font-size is the Font-size value of his parent element set, let us rewrite the code above the CSS:

        . div1{            width:100px;            height:100px;            Font-size:16px;        }        . div2{            width:1em;            Height:1em;            Font-size:12px;            background:red;        }

When we set our own font-size to 12px in the Div2 style, we run the code and we can get the value of width and height in our current div2 to 12px. In this way we can get the conclusion that the value of EM is actually set according to their own, accurate is the value of their own font-size, so many of the online said that EM is relative to the value of the parent element of the argument is wrong.

But in the development of each of our elements have a different font-size then we need to calculate the different width and height of the EM value, whether the development or maintenance costs are too high, A more serious problem is that hierarchical nesting can make it confusing for font-size of each element.

Therefore a more friendly element of the REM birth.

The so-called REM is based on the value of the font-size with the node, for example:

        html{            font-size:20px;        }        . div1{            Width:1rem;            Height:1rem;            Font-size:12px;            background:red;        }

        class='div1'></div>

Run the above code, we get the current div width and height of the value of 20px, it seems that the REM integration of HTML font-size and did not inherit their own font-size so we developed a relative value, The meaning of this is that we can set different font-size values according to the width of different pages to achieve the adaptation of the mobile side problem, this is the hand Amoy flexible design principle, the next chapter I will explain to you about flexible source code!

Px,em and REM details of mobile development