Setting viewport height and width using CSS Media Queries
In this approach, 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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Media Queries</title>
<style>
.box {
width: 80%;
height: 500px;
background-color: #0000ff;
margin-left: 10vw;
}
@media screen and (max-width: 768px) {
.box {
height: 50px;
}
}
h3 {
text-align: center;
}
</style>
</head>
<body>
<h3>Setting viewport height and width
using CSS Media Queries
</h3>
<div class="box"></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.
Contact Us