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.
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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Using CSS Units</title>
<style>
.container {
text-align: center;
}
.box {
height: 200px;
margin: 20px auto;
text-align: center;
}
.px-div {
background-color: #ff0000;
width: 300px;
}
.percent-div {
background-color: #00ff00;
width: 20%;
}
.em-div {
background-color: #0000ff;
width: 20em;
}
</style>
</head>
<body>
<h3 class="container">
Setting viewport height and width using CSS Units
</h3>
<div class="box px-div">
Setting viewport height and width using Px
</div>
<div class="box percent-div">
Setting viewport height and width using %
</div>
<div class="box em-div">
Setting viewport height and width using em
</div>
</body>
</html>
Output:
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:
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:
Contact Us