Detailed explanation of the differences between px, em, rem, %, vw, vh units in CSS

1. px

px is the abbreviation of pixel, a relative length unit relative to the screen resolution.

2. em

The reference is the font-size of the parent element, which has the characteristics of inheritance. The default browser font size is 16px, and 1em is not a fixed value within the entire page.

The font size is also 1.5em, but the effect is completely different. According to the formula provided by W3C, we can calculate: The font size of the div with class id1 is inherited from the parent element body: 16px*1.5em = 24px The font size of the div with class id2 is inherited from the parent element id1: 24px*1.5em = 36px The font size of the div with class id3 is inherited from the parent element id2: 36px*1.5em = 54px

3. rem

rem is a relative unit added in CSS3, but it is only relative to the HTML root element. It allows you to proportionally adjust all font sizes by only modifying the root element, while avoiding the chain reaction of compounding font sizes layer by layer.

4.%

% Percentage, relative length unit, percentage value relative to the parent element

The difference between element width and height and font size:

(1) Try to use relative size units

When using relative size units to measure, there is no need to traverse all internal DOM structures and reset the sizes of internal child elements when adjusting the layout of the page. If the size changes with the parent container or the overall page layout, it is better to use % , such as setting the height and width of an element.

(2) Try to use em and rem for font size

For the maintainability and scalability of font size, it is recommended to use em. If there are 3 or more layers of relative font size settings, you can consider using rem.

5. vw and vh

vm, vh, vmin, and vmax are viewport units and relative units. It is not relative to the parent node or the root node of the page. Instead, it is determined by the viewport size, with a unit of 1, which represents something like 1%. The viewport is the area of ​​your browser that actually displays content — in other words, your web browser excluding toolbars and buttons.

The specific description is as follows:

vw: Percentage of the viewport width (1vw means the viewport width is 1%)
vh: percentage of the viewport height
vmin: Take the smaller value of the current Vw and Vh
vmax: Take the larger value of the current Vw and Vh

vh and vw are relative to the height and width of the viewport. 1vh is equal to 1/100 of the viewport height, and 1vw is equal to 1/100 of the viewport width. For example, if the browser height is 900px and the width is 750px, 1 vh = 900px/100 = 9 px and 1vw = 750px/100 = 7.5 px. It is easy to achieve a box with the same height as the screen.

calc + vm calculates width

width: 800px; 
width: -moz-calc(100vm - (2 * 10)px);
width: -webkit-calc(100vm -(2 * 10)px);
width: calc(100vm - (2 * 10)px);

Summarize

This concludes this article on the detailed explanation of the differences between px, em, rem, %, vw, and vh units in CSS. For more information on the differences between px, em, rem, %, vw, and vh units, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. We hope that everyone will support 123WORDPRESS.COM in the future!