Home > Developer > Web Develop
Relative length units. Pixel px is relative to the display screen resolution.
In the initial production of Web pages, we use "px" to set our text, because he is more stable and accurate. But there is a problem with this approach, and when users browse our web pages in a browser, he changes the font size of the browser, which makes our web page layout broken. This is a big problem for users who are concerned about the usability of their website. Therefore, it is proposed to use "em" to define the font of the Web page.
PX Features
1. IE cannot adjust the font size using PX as the unit;
2. Most of the foreign sites can be adjusted because they use EM or REM as font units;
3. Firefox can adjust PX and em,rem, but more than 96% of Chinese netizens use IE browser (or kernel).
EM for unitsRelative length units. 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.
Also said before, the use is "PX" for the unit is more convenient, but also consistent, but in the browser to zoom in or zoom in to browse the page there is a problem, to solve this problem, we can use "em" units.
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.
To simplify the conversion of font-size, you need to declare font-size=62.5% in the body selector in the CSS, which makes the EM value 16px*62.5%=10px, so 12px=1.2em, 10px=1em, That means you just have to divide your original PX value by 10 and then put EM in as the unit.
This technique requires a reference point, which is generally based on the "font-size" of <body>. For example, we use "1em" equals "10px" to change the default value "1em=16px", so that when we set the font size equivalent to "14px", we only need to set its value to "1.4em".
Body {font-size:62.5%;/*10÷16x100% = 62.5%*/}
h1 {font-size:2.4em;/*2.4emx10 = 24px */}
p{font-size:1.4em;/*1.4emx10 = 14px */}
Li {font-size:1.4em;/*1.4x? = 14px? */}
Why "Li" "1.4em" is not "14px" will be a question mark?
Because when using "em" as a unit, you need to know the setting of its parent element, because "em" is a relative value, and it is a value relative to the parent element.
Its true formula is: 1÷ the parent element's Font-sizex need to convert the pixel value = em value
In this case, "1.4em" can be "14px", or "20px", or "24px", in short is an indeterminate value, then solve the problem, either you know the value of its parent element, or you can use "1em" in any child element. This may not be the way we need it.
EM features
1. The value of EM is not fixed;
2. Em inherits the font size of the parent element.
REM for unitsREM is relative to the root element
Let's look at a simple code example:
{font-size:62.5%; /*10÷16x100% = 62.5%*/}{font-size:1.4rem; /*1.4x10px = 14px */} font-size:2.4rem; /*2.4x10px = 24px*/}
I have defined a basic font size of 62.5% (that is, 10px) in root element From the results above, we use "REM" as convenient as using "px", and also solve the difference between "px" and "em".
REM is a new unit of measurement introduced by CSS3, supported by browsers: Mozilla Firefox 3.6+, Apple Safari 5+, Google Chrome, ie9+, and opera11+.
However, the use of units to set the font, can not completely consider IE, if you want to use this REM, but also want to be compatible with the effect of IE, you can consider "px" and "REM" with the use of "px" to achieve ie6-8 effect, and then use "REM" to achieve the effect of the browser.
CSS3 Setting the font size with rem,em,px
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
