Guide to CSS unit properties: em, rem, px and vw/vh

CSS unit property guide: em, rem, px and vw/vh

When writing CSS styles, it is very important to choose the appropriate unit property. This article will introduce several commonly used unit attributes: em, rem, px and vw/vh, and provide specific code examples.

1. em
   em (font size unit) is the unit relative to the font size of the parent element. If the font size of the parent element is 16px, 1em is equal to 16px. When em is used for other attributes (such as width, height, etc.), it is also a proportional value relative to the font size of the parent element.

Code example:

.parent {
  font-size: 16px;
}

.child {
  font-size: 1em; /* 等同于16px */
  width: 2em; /* 等同于32px */
  height: 3em; /* 等同于48px */
}

2. rem
   rem (root element font size unit) is a unit relative to the font size of the root element (usually an HTML element). Unlike em, rem's base is the font size of the root element. If the font size of the root element is 16px, 1rem is equal to 16px. rem is suitable for the layout part and can easily adjust the proportion of the entire page.

Code example:

html {
  font-size: 16px;
}

.child {
  font-size: 1rem; /* 等同于16px */
  width: 2rem; /* 等同于32px */
  height: 3rem; /* 等同于48px */
}

3. px
   px (pixel unit) is the most common unit and it has a fixed length. px is suitable for situations where precise control of size is required.

Code example:

.child {
  font-size: 16px;
  width: 32px;
  height: 48px;
}

4. vw/vh
   vw (viewport width unit) and vh (viewport height unit) are relative to the viewport width and The unit for the viewport height. Viewport refers to the width and height of the visible area of ​​the browser. vw represents the percentage of the viewport width, and vh represents the percentage of the viewport height. Use vw/vh units to automatically resize elements based on the size of the browser window.

Code example:

.child {
  font-size: 5vw; /* 视口宽度的5% */
  width: 30vw; /* 视口宽度的30% */
  height: 40vh; /* 视口高度的40% */
}

Summary:
Choosing appropriate unit attributes is very important for writing CSS styles that are flexible and adaptable to different screens. em and rem are suitable for relative sizes, px is suitable for fixed sizes, and vw/vh is suitable for adaptive sizes. Choosing the appropriate unit attributes according to the specific situation can make the web page display better on different devices and screens.

The above is a guide about CSS unit properties, I hope it will be helpful to you.

The above is the detailed content of Guide to CSS unit properties: em, rem, px and vw/vh. For more information, please follow other related articles on the PHP Chinese website!