1, PX features: 1, ie cannot adjust PX as the unit font size, 2, Firefox can adjust px, EM and REM. PX is a pixel, is a relative length unit, and is relative to the display screen resolution. 2, EM characteristics: 1, the value of EM is not fixed; 2, em inherits the font size of the parent element. EM is also a relative length unit, relative to the font size of the text within the current object. If the font size of the current inline text is not artificially set, the default font size is relative to the browser. The default font height for any browser is 16px. All non-adjustable browsers are compliant with: 1EM=16PX. So 12px=0.75em,10px=0.625em. In order to simplify the conversion of font-size, it is necessary to declare font-size=62.5% in the body selector in CSS, which makes the EM value 16px*62.5%=10px, so 12px=1.2em,10px=1em, the conversion will be much simpler. Here we are writing CSS to note: 1, the body selector declared font-size=62.5%;2, the original PX value divided by 10, and then replaced by the EM as the Unit; 3. Recalculate the EM values of the enlarged font to avoid duplicate declarations of the font size. That is to avoid 1.2*1.2=1.44 phenomenon. For example, if the font size is 1.2em in #content, then the font size of P can only be 1em, not 1.2em, because this em is not em, it becomes 1em=12px because it inherits the font height of #content. 3. REM Features: REM is a new relative unit of CSS3 (root em, root em). Difference from EM: When you use REM to set the font size for an element, it is still relative size, but relative to the HTML root element. This unit sets the relative size and absolute size of the advantages in one, through it can only modify the root element to adjust the size of all fonts proportionally, but also to avoid the size of the font-by-layer composite chain reaction. Currently, all browsers have REM support in addition to IE8 and earlier versions. For browsers that do not support it, the workaround is simple: px is used with REM, PX is used to achieve ie6-8 effect, and REM is used to achieve the effect of modern browsers.
CSS in px em rem features (RPM)
