Home > Developer > Web Develop
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. It's hard to get in, but it's hard to get back.
Recently in learning about the knowledge of EM, inadvertently let me picked up a treasure, is to use REM to set the font size of the Web page. Let me all of a sudden, I was very happy to read and test a back, it is really cool crooked ah. Master said that things can not be sneaking, I am here to blow this has never seen REM.
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:
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 unitsAlso 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. Richard Rutter ' has done a detailed introduction to the article "How to size text using EMS", and Richard Rutter has made an in-depth analysis of how-to-size text in CSS.
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{< span class= "attribute" >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.
Here I simply introduced a two units of the use of the specific point you can refer to:
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 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
Browser compatibilityREM 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? Ha.... We do not try to imitate, but also quite interesting, perhaps this is the mainstream of the measurement unit.
Transferred from:w3cplus
CSS3 rem Set Font size (RPM)
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
