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

What is the difference between px, em and rem in CSS? I believe many inexperienced people don't know what to do about it. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Domestic designers mostly like to use px, while foreign websites mostly like to use em and rem, so what is the difference between the three, and what are their advantages and disadvantages? Let's give you a detailed introduction.

Characteristics of PX

1. IE cannot resize fonts that use px as a unit

two。 The reason why most foreign websites can be adjusted is that 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 browsers (or kernels).

Px pixels (Pixel). A unit of relative length. Pixel px is relative to the screen resolution of the monitor. (quoted from CSS2.0 manual)

Em is a unit of relative length. The font size relative to the text within the current object. If the current font size for inline text is not artificially set, it is relative to the default font size of the browser. (quoted from CSS2.0 manual)

The default font height for any browser is 16px. All untuned browsers match: 1em=16px. Then 12pxcards 0.75empendium 10pxboxes 0.625em. To simplify the conversion of font-size, you need to declare Font-size=62.5%, in the body selector in css, which changes the em value to 16px*62.5%=10px, so 12px=1.2em, 10px=1em, that is, just divide your original px value by 10 and replace it with em as a unit.

Characteristics of EM

1. The value of em is not fixed; 2. Em inherits the font size of the parent element.

So when we write CSS, we need to pay attention to two points:

1. Declare Font-size=62.5% in the body selector

two。 Divide your original px by 10 and replace it with em.

3. Recalculate the em values of those enlarged fonts. Avoid repetitive declaration of font size.

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

Characteristics of rem

Rem is a new relative unit (root em, root em) of CSS3, which has attracted wide attention. What's the difference between this unit and em? The difference is that when you use rem to set the font size for an element, it is still a relative size, but the opposite is only the HTML root element. This unit can be described as a combination of relative size and absolute size, through which all font sizes can be adjusted proportionally only by modifying the root element, and the chain reaction of font size layer by layer can be avoided. Currently, all browsers except IE8 and earlier versions support rem. For browsers that do not support it, the solution is also simple: write an extra declaration of absolute units. These browsers ignore the font size set with rem. Here is an example:

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

Note: the choice of font units is mainly determined by your project, if your user base uses the latest version of the browser, it is recommended to use rem, if compatibility is considered, use px, or both.

After reading the above, have you mastered the difference between px and em and rem in CSS? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.