The difference between px, em, and rem

px

Pixel px is the resolution relative to the display screen. IE cannot adjust the font size using px as the unit. Many domestic netizens use IE kernel browsers, and most foreign websites use em or rem font units.

in

Relative unit, inherits the font size of the parent element. Indicates the font size relative to the text in the current object. If the current font size is not set, it is relative to the browser's default font size.

The default font size of the browser is 16px. In order to facilitate the conversion of px and em, the font-sixe of the body can be set to 62.5%, and the original pixels are divided by 10 in other places, and em is used as the unit.

rem

Its size is relative to the html root element, and only changing the font size of the root element can change other font sizes proportionally.

Choice of px and rem?

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

For various mobile devices that need to be adapted, use rem. For example, it only needs to adapt to devices with relatively large resolution differences such as iPhone and iPad.


Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324394565&siteId=291194637