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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Setting viewport height and width
using Viewport-Relative Units
</title>
<style>
body,
html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: flex-start;
}
.container {
margin-top: 20px;
}
.box {
width: 50vw;
height: 50vh;
background-color: #ff0000;
}
h3 {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h3>Setting viewport height and width
using Viewport-Relative Units
</h3>
<div class="box"></div>
</div>
</body>
</html>
Output:
Output
How to Set Viewport Height & Width in CSS ?
Set viewport height and width in CSS is essential for creating responsive and visually appealing web designs. We’ll explore the concepts of setting viewport height and width by using various methods like CSS Units, Viewport-Relative Units, and keyframe Media Queries.