Home > Developer > JavaScript
After reading some rem knowledge points, I will make a self-Summary here, and summarize the rem knowledge points.
The most common font units are PX and EM.
First, px:
Pixel (Pixel ). The unit of relative length. Pixel px is relative to the screen resolution of the monitor. (Derived from the CSS2.0 manual)
Px changes with the screen resolution, but the overall layout of the page is affected when the browser scales the page.
Em:
Em is the unit of relative length. The font size relative to the text in the current object. If the font size of the text in the row is not set manually, the default font size is relative to that of the browser. (Derived from the CSS2.0 manual)
Em generally uses the font-size of <body> as the benchmark and inherits from the parent element. Multi-layer nesting can easily cause confusion. For example:
<Body>
<Div>
<P> </p>
</Div>
</Body>
If the font in the body is set to 10px, the font in the div is 1.2em or 12px. If the font in p is set to 12px, set 1em in p instead of 1.2em. If 1.2em is set in p, the actual font size is 1.2*1.2 = 1.44.
Css3 has a new unit, rem.
When you use rem to set the font size for the element, the object size is still relative, but the relative size is only the HTML root element, rather than the relative parent element of em.
That is to say, you can define a separate font size on the html node, and then set the percentage of all other elements with rem relative to the font, which means that, we only need to determine a reference value in the root element.
Specify the font size in the preceding example.
For example:
The html {font-size: 62.5%}/* root element defines a base font size of 62.5% (that is, 10px. Setting this value is mainly convenient for calculation. If this value is not set, it will be based on "16px ).
Body {font-size: 1.2rem}/* 12px */
H1 {font-size: 1.4rem}/* 14px */
Specific conversion reference http://pxtoem.com/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
