Shulou(Shulou.com)06/01 Report--

Up to now, there is still a heated debate about what unit to use to define the font size of the page in Web. Some people say that PX is a good unit, some people say that EM has many advantages, and some people are saying that the percentage is convenient, so that there is a competition such as CSS Font-Size: em vs. Px vs. Pt vs. Percent. Unfortunately, there are still different advantages and disadvantages, so that all kinds of technologies are not ideal, but we have to use them. It's hard to get in and it's hard to retreat.

Recently, when I was learning about em, I inadvertently found a treasure, that is, I used rem to set the font size of Web pages. It cheered me up all of a sudden. I read it and tested it in one breath. It was really refreshing. The master said you can't eat good food alone, so I'm here to brag about the REM I've never seen before.

Before taking a detailed look at rem, let's review our two commonly used units of measure, which are also controversial:

PX is the unit

EM is the unit

PX is the unit

In the initial production of Web pages, we all use "px" to set our text because it is more stable and accurate. But there is a problem with this approach. When a user browses our Web page in a browser, he changes the font size of the browser, and the layout of our Web page is broken. This is a big problem for users who are concerned about the usability of their websites. Therefore, it is proposed to use "em" to define the font of the Web page.

Em is the unit

As mentioned earlier, it is more convenient and consistent to use "px" units, but there is a problem when zooming in or zooming in browsing pages in browsers. To solve this problem, we can use "em" units. Richard Rutter' has made a detailed introduction in the article "How to size text using ems", and Richard Rutter has also made an in-depth analysis in "How to Size Text in CSS" as early as possible.

This technique requires a reference point, which is generally based on "font-size". For example, we use "1em" equals "10px" to change the default value "1em=16px", so that when we set the font size to "14px", we only need to set its value to "1.4em".

Body {font-size: 62.5% Tracer 10 / 16 × 100% = 62.5% /} H2 {font-size: 2.4em / * 2.4em × 10 = 24px * /} p {font-size: 1.4em; / * 1.4em × 10 = 14px * /} li {font-size: 1.4em / * 1.4x? = 14px? * /}

Why is the "1.4em" of "li" whether "14px" will be a question mark? If you know "em", you will think that this question is too much to ask. As briefly introduced earlier, when using "em" as a unit, you must know the setting of its parent element, because "em" is a relative value, and it is a value relative to the parent element, and its real calculation formula is:

1 / the font-size × pixel value to be converted of the parent element = em value

In this case, "1.4em" can be "14px", or "20px", or "24px". In short, it is an uncertain value, so to solve this problem, either you know the value of its parent element, or use "1em" in any child element. This may not be the method we need.

Here I just briefly introduce the use of these two units. For more details, you can refer to:

"CSS Font-Size: em vs. Px vs. Pt vs. Percent" by Kyle, the stationmaster of Best Practices

Converting px into percentage and em for relative CSS font sizes

Em Vs Percent Widths

CSS: Units of Measurement

Using Points, Pixels, Ems, or Percentages for CSS Fonts of Jennifer Kyrnin

Rem is the unit

With the emergence of CSS3, he has also introduced a number of new units, including what we call rem today. This is how rem is described on the W3C official website-"font size of the root element". Let's learn more about rem.

As mentioned earlier, "em" sets the font size relative to its parent element, so there is a problem. Any element setting may need to know the size of his parent element, which brings an unpredictable risk of error when we use it many times. Rem is relative to the root element, which means that we only need to determine a reference value in the root element and set the font size in the root element, which can be based on your own needs. You can also refer to the following figure:

Let's look at a simple code example:

Html {font-size: 62.5% 10px /} body {font-size: 1.4 10px = 14px * /} H2 {font-size: 2.4 10px = 24px*/}

I defined a basic font size of 62.5% (that is, 10px) in the root element. Setting this value is mainly convenient for calculation, if not set, it will be based on "16px"). From the above calculation results in October, we find that using "rem" is as convenient as using "px", and solves the difference between "px" and "em" at the same time.

Browser compatibility

Rem is a new measurement unit introduced by CSS3. Everyone must feel discouraged and worry about the support of the browser. In fact, don't be afraid, you may be surprised, there are quite a lot of browsers supported, such as Mozilla Firefox 3.6 +, Apple Safari 5 +, Google Chrome, IE9+ and Opera11+. It's just that poor IE6-8 can't, so you can think of them as transparent. I always do.

If you want to use this REM, but you also want to be compatible with the effects under IE, but you can consider using "px" and "rem" together, using "px" to achieve the effect under IE6-8, and then using "Rem" to achieve the effect of the browser on behalf of the browser. Let IE6-8 not change with the text, who makes this Ie6-8 so old? Uh-huh. no, no, no. If you don't try it, it's interesting. Maybe this is the mainstream unit of measurement.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.