What is the difference between px, em, and rem in css?

Difference: px represents pixels, which is a relative length unit. The font size is set relative to the monitor screen resolution. It does not support IE scaling; em is a relative length unit, which is set relative to its parent element. The font size supports IE scaling; rem is a relative length unit and sets the font size relative to the HTML root element.

Recommended tutorial: CSS video tutorial

PX, The definition of EM and REM

px represents pixels and will not change due to changes in the size of other elements.

The size of the pixel will "change", also known as the "relative length". The higher the pixel, the richer the color palette it has, and the more realistic the color can be expressed.

em represents the font size relative to the parent element. Em is a relative unit. There is no fixed measurement value, but a relative value determined by the size of other elements.

em is a relative length unit, relative to the font size of the text in the current object. If the current font size of the inline text has not been manually set, it will be relative to the default font size of the browser. It is used more abroad.

The default font height of any browser is 16px, and all unadjusted browsers comply with: 1em=16px. Then 12px=0.75em; 10px=0.625em; in order to simplify the conversion of font-size, Font-size=62.5% needs to be declared in the body selector in CSS, which makes the em value become: 16px*62.5%=10px ; In this way, 12px=1.2em; 10px=1em, that is to say, you only need to divide your original px value by 10, and then change em as the unit.

REM is a relative unit and is relative to the HTML root element. This unit can be said to combine the advantages of relative size and absolute size. Through it, you can adjust all font sizes proportionally by modifying only the root element, and you can avoid the chain reaction of compounding font sizes layer by layer.

Characteristics of px, em and rem units in CSS style sheets

Under normal circumstances, we usually use px to define fonts. Therefore, the browser font amplification function cannot be used, and most foreign websites can be used under IE. This is mainly because:

(1) IE cannot adjust the font size that uses px as the unit;

(2) The reason why most foreign websites can be adjusted is that they use em as the font unit;

(3) Firefox can adjust px and em, but more than 96% of Chinese Netizens use IE browser (or kernel).

So, what are the characteristics of css units px, em and rem?

1. Characteristics of px

PX is actually a pixel. When using PX to set the font size, it is more stable and accurate.

But there is a problem with this method. When the user browses the Web page we created in the browser, if the zoom of the browser is changed, the layout of our Web page will be broken, so for This is a big problem for users who are concerned about the usability of their website.

Therefore, it was proposed to use "em" to define the font of the Web page.

2. Characteristics of em

EM is to scale the font size according to the benchmark. EM is essentially a relative value rather than a specific numerical value. This technology requires A reference point is generally based on the "font-size" of

. For example, the benchmark of WordPress official theme Twentytwelve is 14px=1em.

Generally speaking, em has the following characteristics:

(1), the value of em is not fixed;

(2), em will inherit the value of the parent element font size.

So, when we write CSS, we need to pay attention to the following three points:

(1), declare Font-size=62.5% in the body selector;

( 2) Divide your original px value by 10, and then replace it with em as the unit;

If you only need the above two steps to solve the problem, no one may use px. After the above two steps, you will find that the font size of your website is unexpectedly large, because the value of em is not fixed and will inherit the size of the parent element. You may set the font size to 1.2em in the content div. That is 12px.

Then you set the font size of selector p to 1.2em, but if p belongs to the child of content, the font size of p is not 12px, but 1.2em= 1.2 * 12px=14.4 px, this is because the font size of content is set to 1.2em. This em value inherits the size of its parent element body, which is 16px * 62.5% * 1.2=12px, and p is its child, and em inherits the size of content. The font height is 12px, so the 1.2em of p is no longer 12px, but 14.4px.

(3). Recalculate the em value of those enlarged fonts to avoid repeated declaration of font size.

That is to avoid the phenomenon of 1.2 * 1.2 = 1.44. For example, if you declare the font size to be 1.2em in #content, then when declaring the font size of p, it can only be 1em, not 1.2em , because this em is not that em, it inherits the font height of #content and becomes 1em=12px.

However, the exception is 12px Chinese characters. The 12px (1.2em) Chinese characters obtained by the above method are not equal to the font size directly defined by 12px in IE, but are slightly larger. This problem has been solved. Just change 62.5% to 63% in the body selector and it will display normally. The reason may be that when IE processes Chinese characters, the accuracy of floating point values ​​is limited. I don’t know if there is any other explanation. and optimization methods (for more detailed optimization, please check the relevant introduction on Ma Haixiang's blog "Look at CSS details that can improve efficiency but are easily overlooked").

3. Characteristics of rem

rem is a new relative unit (root em, root em) added to CSS3. This unit has attracted widespread attention.

EM sets the font size relative to its parent element, so there will be a problem. For any element setting, you may need to know the size of its parent element, while Rem sets the font size relative to the root element< ;html>, this means that we only need to determine a reference value on the root element.

Currently, all browsers except IE8 and earlier versions support rem.

For browsers that do not support it, the solution is very simple, which is to write an additional absolute unit statement. These browsers ignore font sizes set with rem.

The following is an example:

p {font-size:14px; font-size:.875rem;}

The difference between px, em and rem units in CSS style sheets

Normally Next, we distinguish the difference between px and em: px is an absolute unit and does not support the scaling of IE. em is a relative unit and supports the scaling of IE. In fact, the differences between the css units em, px and rem, in detail, are The following points:

1. PX: pixel

PX is a relative length unit, which is relative to the monitor screen resolution.

Advantages and Disadvantages: It is relatively stable and accurate, but the page will be confused when zooming or zooming in the browser.

2. EM

EM: It is a relative length unit. EM is used to design the font size relative to the parent element. If the current font size for inline text has not been manually set, it is relative to the browser's default font size.

Advantages and disadvantages: The value of EM is not fixed, it will inherit the font size of the parent element.

Conversion between PX and EM:

The default font height of any browser is 16px. All unmodified browsers conform to: 1em=16px. Then, 12px=0.75em, 10px=0.625em.

For ease of use, when using em, we usually declare font-size=62.5% in the body selector in CSS (making the em value become: 16px*62.5%=10px). After that, you only You need to divide the px value you use by 10 to get the em value, such as: 12px=1.2em, 10px=1em.

3, REM

REM is a new relative unit in CSS3. REM is a relative unit and a relative HTML root element.

This unit can be said to combine the advantages of relative size and absolute size. It can not only modify the root element to adjust the size of all fonts proportionally, but also avoid the chain reaction of compounding font sizes layer by layer. .

Currently, all browsers except IE8 and earlier versions support rem.

For more programming-related knowledge, please visit: Programming Teaching! !

The above is the detailed content of What is the difference between px, em, and rem in css?. For more information, please follow other related articles on the PHP Chinese website!