Difference between Css units px, rem, em, vw, vh

px

px is the abbreviation of pixel, the relative length unit, the basic unit commonly used in web design. Pixels are relative to the monitor screen resolution

em

em is a relative length unit. The font size relative to the text in the current object (the reference is the font-size of the parent element)

If the font size of the current parent element is not set, it is relative to the browser’s default font size

Features:

1. The value of em is not fixed;

2. em inherits the font size of the parent element

rem

rem is a new relative unit in CSS3, and rem is a unit of length calculated relative to the font size (font-size) of the HTML root element.

If you do not set the font size of html, it will use the browser default font size, usually 16px

 html{font-size: 62.5%} /* 10 ÷ 16 × 100% = 62.5% */  body{font-size: 1.4rem;} /* 1.4 × 10px = 14px */  /* A basic font size of 62.5% is defined in the root element (that is, 10px. Setting this value is mainly convenient for calculation. If it is not set, it will be based on "16px")*/

The advantage is that you only need to set the size of the root directory to adjust the proportion of the entire page.

rem compatibility: rem is already supported in all browsers except IE8 and earlier

The difference between em and rem:…

The post Difference between Css Units px, rem, em, vw, vh first appeared on Lenix Blog .

This article is reprinted from https://blog.p2hp.com/archives/9475
This site is for inclusion only, and the copyright belongs to the original author.

Leave a Comment