Explain the concept of the ‘vh’ and ‘vw’ units in CSS

The vh (viewport height) and vw (viewport width) units in CSS are relative length units that represent a percentage of the viewport dimensions. They provide a responsive way to size elements based on the dimensions of the user’s viewport. Here’s an explanation of these units:

Viewport Height (‘vh’) Unit

• ‘vh’ stands for viewport height. It represents a percentage of the viewport’s height and is equivalent to 1% of the viewport’s height.
• Commonly used for creating responsive designs where elements scale with the height of the viewport.
• ‘vh’ units are employed to establish dynamic vertical spacing between elements and are useful for maintaining consistent spacing relative to the height of the viewport.

Syntax

height: 50vh;

Viewport Width (‘vw’) Unit

• ‘vw’ stands for viewport width. It represents a percentage of the viewport’s width and it is equivalent to 1% of the viewport width.
• Frequently used for responsive designs where elements scale with the width of the viewport and it ensures adaptability and optimal layout presentation on diverse screen sizes.
• ‘vw’ units are employed for creating dynamic horizontal spacing between elements. Offers consistency in spacing relative to the width of the viewport.
• Setting the width of a container to 50vw creates a design that occupies half of the viewport width.

Syntax

width: 50vw;