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

This article mainly explains "what is the difference between px and em,rem units in css". The explanation in this article is simple and clear and easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the difference between px and em,rem units in css".

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.

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

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.

Thank you for your reading, the above is the content of "what is the difference between px and em,rem units in css". After the study of this article, I believe you have a deeper understanding of what is the difference between px and em,rem units in css. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.