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.
<!--Driver Code Starts-->
<!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>
<!--Driver Code Ends-->
<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>
<!--Driver Code Starts-->
</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>
<!--Driver Code Ends-->
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.
<!--Driver Code Starts-->
<!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>
<!--Driver Code Ends-->
<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>
<!--Driver Code Starts-->
</head>
<body>
<div class="container">
<h3>Setting viewport height and width
using Viewport-Relative Units
</h3>
<div class="box"></div>
</div>
</body>
</html>
<!--Driver Code Ends-->
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.
<!--Driver Code Starts-->
<!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>
<!--Driver Code Ends-->
<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>
<!--Driver Code Starts-->
</head>
<body>
<h3>Setting viewport height and width
using CSS Media Queries
</h3>
<div class="box"></div>
</body>
</html>
<!--Driver Code Ends-->