Home > Developer > Web Develop
Tag: Image its screen resolution differs body decision. com doc size
today, let's talk about the three font units most commonly used in CSS: Px,em and REM. PX is a unit of relative length, its size is relative to the screen resolution, EM and REM are different, in short, their font size is determined by the reference. For EM, its reference, is the parent font, that is, its size is always based on the parent font size to adjust, and REM is a new relative unit of CSS3, this unit caused widespread concern. What is the difference between this unit and EM? The difference is that 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 is a combination of relative size and absolute size of the advantages in one, through it can only modify the root elements in proportion to adjust all font size, but also to avoid the size of the font-layer composite chain reaction. Currently, in addition to IE8 and earlier versions, all browsers support REM.
Let's compare the differences between the three units by an example:
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"/> <title>Relative to absolute font</title></Head><styletype= "Text/css">. Div1{font-size:18px; }. Div2{font-size:1.5em; }. Div3{font-size:2rem; }</style><Body> <Divclass= "Div1"> <span>Relative and Absolute</span> <Divclass= "Div2"> <span>Relative</span> <Divclass= "Div3"> <span>Absolutely</span> </Div> </Div> </Div></Body></HTML>
The results of the operation are as follows:
The size of the three-line font is as follows:
Let's analyze why this is the case, the first line of the text size is obvious, because we set the font size is 18px, the second text font size we set the 1.5em,1.5em why is it 27px? We mentioned above that the EM is a relative font unit, its size is determined by the size of the parent font, its parent at this point is our first line of text, the second line of text size is 18px, then 1.5em is 1.5*18 is 27px; So how does the 32px of the third line of text come about? REM is also a relative font unit whose font size is changed relative to the font size of the HTML root element. Here is a little common sense, is the browser's default font is 16PX, then, 2EM is 32px
Font units for CSS
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
