px Pixels (Pixel). Relative length units. The pixel px is relative to the screen resolution of the monitor. This unit should not say more, we use the most. In the initial production of Web pages, we used px to set up our text because he was more stable and precise. But there is a problem with this approach, when the user browses the Web page we made in the browser, he changes the font size of the browser, which is broken using our web page layout. This is a big problem for users who are concerned about the usability of their website. Therefore, the em font used to define the Web page is presented.
EM is the relative length unit. The font size relative to 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-adjusted browsers are compliant:
1em=16px
So
12px=0.75em10px=0.625em
emA reference point is required and is generally based on <body> the font-size benchmark. For example, we use 1em=10px to change the default value, so 1em=16px that when we set the font size equal 14px , we just need to set its value to 1.4em . That means you just have to divide your original PX value by 10 and then put EM in as the unit.
body {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}h1 {font-size: 2.4em; /*2.4em × 10 = 24px */}p {font-size: 1.4em; /*1.4em × 10 = 14px */}li {font-size: 1.4em; /*1.4 × ? = 14px ? */}
Why li 1.4em 14px is it a question mark? If you know about it em , you will find that the question is more asked. As you can see in the previous section, when working with em units, you need to know the settings of the parent element, because it is em a relative value, and a value relative to the parent element, whose true formula is:
1 ÷ 父元素的font-size × 需要转换的像素值 = em值
This can be, 1.4em 14px or can be, 20px or is, in short, 24px an indeterminate value, then solve the problem, either you know the value of its parent element, or it is used in any child element1em
That's a bit of a detour ... Look directly at the following example:
EM will inherit the parent element's font size
Css:
body{font-size: 16px;}p{font-size:0.75em;}span{font-size:2em;}
Html:
If you really need to see a detailed correspondence, this site provides a PX,EM,REM unit conversion tool
Address: http://pxtoem.com/
Three. REMCSS3, he also introduced some new units, including what we call REM today. This is described on the Internet website rem font size of the root element . Let's get down to a detailed understanding rem .
It says that the em font size is set relative to its parent element, so there is a problem with any element setting, and it may be necessary to know the size of his parent element, which, when we use it many times, presents an unpredictable risk of errors. And it's relative to the root rem element , which means that we just need to determine a reference value at the root element.
Let's look at the following code:
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}body {font-size: 1.4rem;/*1.4 × 10px = 14px */}h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
I have defined a basic font size in the root element (that is 62.5% , 10px . Setting this value is primarily easy to calculate, and if not set, it will be the 16px benchmark. From the above calculation, we use rem px the same convenience as the use, but also solve the difference between the px em two.
Well, the ideal is very plump, but the reality is very bony, look at the following code:
<!DOCTYPE html>
According to the above theory, the width of the div setting is 5rem , then should be 50*50 the width of the high, and the a label inside,,, padding height line-height font-size should be a multiple of 10, but the actual situation?
This is the result of this code being tested on the chrome browser
This is div the size:
aSize of the label:
spanThe size of the label
Can be clearly seen, obviously set up, that html:62.5% 10px is, but the actual is in addition to a the label font-size , the others are in accordance with the 12px calculation. But the same effect, we try on the Safari browser,
About responsive layouts
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
