About units px, EM, rem in CSS

First of all, px, EM, rem are relative units;

PX (pixel pixels) is relative to the display screen resolution, IE cannot adjust those using PX as the unit of the font size;

EM is relative to the size of the text font within the current object, such as the default font size for the browser if the font size of the current inline text is not artificially set. (quoted in the CSS2.0 manual ), but note that the EM unit inherits the font size of the parent element ;

And REM is a CSS3 new relative length unit (root em, root em); So what's the difference between this unit and EM? REM, like em units, is a relative unit, and the difference is that EM is calculated relative to the parent element's font-size, and REM is calculated relative to the root element html font-size, so REM orbits the complex hierarchical relationship, A function similar to the EM unit is implemented. currently other than IE8 and its earlier versions of the browser have supported REM;

/*********************/

The default font height of any browser is 16px; All unmodified browsers conform to: 1em=16px, then 12px=0.75em,10px=0.625em; to simplify font-size conversion, you need to declare it in the body selector in the CSS font-size=62.5%, this makes the EM value 16px*62.5%=10px, so 1em=10px, that is, you just need to divide your original PX value by 10 and then replace it with EM as the unit.

So when we use EM as units, we need to pay attention to three points:

1. Declare font-size=62.5% in the body selector;

2. Divide your original PX value by 10 and then replace it with EM as the unit;

3. Recalculate the EM value of the enlarged font to avoid duplicate declaration of the font size;

On the 3rd, that is to avoid the phenomenon of 1.2 * 1.2 = 1.44; For example, if you declare a font size of 1.2em in #div1, you can only 1em if you declare the font size of the #div1 child element #div2. Instead of 1.2em, if 1.2em, it will inherit the #div1 font height and become 1.2*1.2=1.44 relative length , so the value of EM is not fixed, it will inherit the parent element font size;

By default, the browser gives the font size is 16px, so according to the conversion relationship 16px = 1rem, when using the REM layout, in order to be compatible with different resolutions, we should dynamically correct the size of the root font, so that all the child elements in rem units are scaled together to achieve an adaptive effect The general situation at the top of the project to load a section of JS to modify the HTML font-size, for different resolutions to calculate font-size, listen to the browser to change the HTML font-size, HTML set fontsize size, In fact, in the domcontentloaded or resize changes after adjusting the size of fontsize, so as to adjust the REM ratio relationship;

The following is the code that Aaron God told about Christmas in his class to implement the font-size;ps of listening to the browser to change the HTML: non-CTRL c+v, conscience hand beat ~ hindering

var docele=document.documentelement; This event is triggered when the user flips the device (that is, if the device is laterally or vertically held and the direction changes); When binding the Resizeevt event, be aware that when the browser does not support the Orienrationchange event, we bind the resize event; In short, the listener needs to reset the value of the root font when the window is changed; resizeevt= ' orientationchange ' in window? ' Orientationchange ': ' Resize ', Recal=function () { ① docele.style.fontsize=20* (docele.clientwidth/320) + ' px '; } Binding browser scaling and loading events Windows.addeventlistener (Resizeevt, recal, false); Windows.addeventlistener (domcontentloaded, recal, false);

Note that the formula docele.style.fontsize=20* (docele.clientwidth/320) + ' px ' is not certain and needs to be defined according to different circumstances, see: http://www.data321.com /fe659370;

/******* Beginner Small white Writing of the text, you big if Hua is wrong in the text or have a better opinion welcome message yo, Timberland ~ ~ ~ ~*******/

/***** Unit summary on the sauce, meal to go, I was the light summoned baby, haha! *****/

About units px, EM, rem in CSS