The difference between CSS vh units and percentages

The Difference Between CSS VH Units and Percentages

There are many types of units in CSS, among which VH units and percentage units are often used to achieve responsive layouts. This article will detail the differences between the vh unit and percentage units, as well as their practical application scenarios and considerations in development.

1. vh Unit

The vh unit is a relative unit introduced in CSS3 that represents the height of the viewport. One vh unit is equal to 1% of the viewport height. For example, if the viewport height is 1000px, then 1vh is equal to 10px.

Sample code 1

.container {
height: 50vh;
background-color: #f0f0f0;
}

In the above example, the container is given a height of 50vh, which means the container’s height is 50% of the viewport height. When the viewport height changes, the container’s height will adjust adaptively.

Notes

• The vh unit is a relative unit and will change with changes in the viewport height.
• In some cases, the vh unit may cause layout distortion and require adjustment.

2. Percentage Unit

Percentage units are widely used in CSS and can be used to express lengths or widths relative to the parent element. Unlike the vh unit, percentage units can be used to express the values ​​of various properties, not just heights.

Sample Code 2

.box {
width: 50%;
padding: 10%;
margin: 5%;
} 

In the above example, the width, padding, and margin of the box element are all percentage values ​​relative to the width of the parent element.

Notes

• Percentage units are relative units and will change as the parent element’s dimensions change.
• Percentage units can be applied to various properties, providing greater flexibility.

3. Differences and Application Scenarios

Differences

• The vh unit can only be used to represent viewport height, while percentage units can be applied to various properties.
• The vh unit is relative to the viewport height, while percentage units are relative to the parent element’s dimensions.

Application Scenarios

• Use the vh unit when you need to implement a responsive layout based on the viewport height.
• Use the percentage unit when you need to implement a layout relative to the parent element’s dimensions.

Conclusion

Both the vh unit and the percentage unit are commonly used relative units in CSS and play an important role in implementing responsive layouts. By flexibly utilizing these two units, developers can more efficiently achieve various layout effects. When using the vh unit and percentage unit, it’s important to choose the appropriate unit based on the specific situation to achieve the best layout results.