CSS3 New relative unit REM, which uses REM as a relative font size unit with EM, and the difference is that REM is relative to the HTML root element. Since many netizens mention REM, I'll summarize one of them here.
What units to use in the Web to define the font size of the page, until today are still in a heated debate, some people say PX as a unit, some people say that the advantages of EM many, there are people say the percentage is convenient, so that there is a CSS font-size:em vs. px vs. PT vs. Percent this kind of pk overall situation. Unfortunately, there are still different pros and cons that make all kinds of technologies less than ideal, but they cannot be used.
Before we go into the details of REM, let's take a look at two of the most commonly used units of measurement, and it's the two most controversial:
PX for units
EM for units
PX for units
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, 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, it is proposed to use "em" to define the font of the Web page.
EM for units
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.
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? If you have known "em", you will feel that the problem is more asked. As mentioned earlier, when using "em" as a unit, you need to know the setting of the parent element, because "em" is a relative value, and a value relative to the parent element, the real formula is:
1÷ the Font-sizex of the parent element needs 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.
REM for units
CSS3 's appearance, he also introduced some new units, including what we call REM today. The "font size of the root element" is described in this web site. Let's get a detailed understanding of REM.
It said that "em" is relative to its parent element to set the font size, so there is a problem, any element setting, it may be necessary to know the size of his parent element, when we use multiple times, will bring unpredictable error risk. While REM is relative to the root element
Let's look at a simple example below:
HTML {font-size:62.5%;/*10÷16x100% = 62.5%*/}body {font-size:1.4rem;/*1.4x10px = 14px */}h1 {font-size:2.4rem;/* 2.4x10px = 24px*/}I have defined a basic font size of 62.5% (that is, 10px) in root element
Browser compatibility
REM is a newly introduced CSS3 a unit of measurement, we will certainly feel frustrated, worried about the browser support. In fact, you don't have to be afraid, you might be amazed at the number of browsers supported, such as Mozilla Firefox 3.6+, Apple Safari 5+, Google Chrome, ie9+ and opera11+. But the poor ie6-8 cannot, and you will make them transparent, I have always been so.
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. Let ie6-8 can not change with the text changes, who let this ie6-8 so old!
To
Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!
Recommended reading:
CSS3 of linear-gradient linear gradient using method
The Mask-image property of CSS is detailed
How the hover selector is used
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
