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:
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