Why are vh and vw units used in CSS for specifying sizes?

Units of measurement vh and vw in CSS are used to specify sizes relative to the viewport size of the browser.

• vh (viewport height): Represents 1% of the viewport height.
• vw (viewport width): Represents 1% of the viewport width.

Their main purpose is to create responsive designs where element sizes depend on the current size of the browser window, rather than fixed pixel values or parent element sizes. This allows for easy scaling of elements such as full-height or full-width sections, fonts, images, and other components, ensuring comfortable viewing on devices with different screen sizes.

For example:

• height: 100vh; — makes the element 100% of the viewport height.
• width: 50vw; — makes the element 50% of the viewport width.