Set Viewport Height & Width in CSS

Setting viewport height and width in CSS helps create responsive and attractive webpage layouts. It allows elements to adjust according to the screen size of different devices.

• Viewport dimensions can be set using CSS units like vh and vw.
• Viewport-relative units help make web designs responsive.
• Media queries can also be used to adjust layouts for different screen sizes.

Setting viewport height and width using CSS Units

CSS units such as pixels (px), percentages (%), and ems (em) allow to specify fixed or relative dimensions for elements based on the viewport size.

Example: Setting viewport height and width using CSS Units.

Setting viewport height and width using Viewport-Relative Units

This approach ensures that elements scale proportionally with the viewport, offering a flexible and intuitive way to create responsive layouts. Viewport-relative units, including vh (viewport height) and vw (viewport width), enable developers to define element dimensions relative to the size of the viewport.

Example: Setting viewport height and width using Viewport-Relative Units.

Setting viewport height and width using CSS Media Queries

Here, the .box element has a default height of 500px and adjusts to 50px on screens smaller than 768px using CSS media queries, demonstrating how to set viewport height and width dynamically based on screen size.

Example: Setting viewport height and width using CSS Media Queries.