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

This article mainly introduces the advantages and disadvantages of px, em, rem related knowledge, the content is detailed and easy to understand, easy to operate, has a certain reference value, I believe you will gain after reading this article on the advantages and disadvantages of px, em, rem, let's take a look at it.

PX

Px pixels (Pixel). A unit of relative length. Pixel px is relative to the screen resolution of the monitor.

Characteristics of PX

\ 1. IE cannot adjust the font size that uses px as a unit

\ 2. The reason why most foreign websites can be adjusted is that they use em or rem as font units.

Firefox can adjust px and em,rem, but more than 96% of Chinese netizens use IE browsers (or kernels).

EM

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.

Characteristics of EM

1. The value of em is not fixed

\ 2. Em inherits the font size of the parent element.

Note: 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.

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

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

\ 2. 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.

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.

The choice between px and rem?

For those who only need to adapt to a small number of mobile devices, and the resolution has little impact on the page, you can use px.

For devices that need to adapt to a variety of mobile devices, use rem. For example, you only need to adapt to devices with large differences in resolution, such as iPhone and iPad.

This is the end of the article on "what are the advantages and disadvantages of px, em and rem?" Thank you for reading! I believe you all have a certain understanding of the knowledge of "what are the advantages and disadvantages of px, em and rem". If you want to learn more, you are welcome to follow the industry information channel.

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.