VW in CSS
CSS is all about presentation. Discover how VW in CSS works to transform plain HTML into a premium user experience in the guide below.
What is VW?
VW is the abbreviation for viewport width . It is the unit that signifies the percentage of the viewport width. If we set the element's width as 1vw, it means 1 percent of the width of the viewport. In the same way, 25vw is equal to 25% of the width of the viewport. The screen size grows and shrinks with the help of the viewport width.
The viewport width (VW) unit plays a significant role in creating a responsive web design. When utilizing VW for an element's unit, its width automatically adapts based on the screen size. This implies that if the screen is a computer, the VW unit will adjust accordingly to fit the computer screen; similarly, if the screen is a tablet, the VW unit will adjust to suit the tablet screen size.
Demonstrations of Utilizing the VW Unit
We will understand vw in CSS through practical examples.
Demonstration 1:
We are going to generate a list in this example and define the font-size of the specified element using the vw unit.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Setting the style to the list utilizing viewport width</title>
<style>
body {
font-family: Verdana, Tahoma, sans-serif;
}
li {
font-size: 2vw;
}
</style>
</head>
<body>
<h1>List of festivals</h1>
<ul>
<li> Diwali </li>
<li> Eid </li>
<li> Christmas </li>
<li> Holi </li>
<li> Navratri </li>
<li> Chhath Abdul </li>
<li> Dussehra </li>
<li> Basant Panchmi </li>
<li> Mahashivratri </li>
<li> Janmashtami </li>
</ul>
</body>
</html>
Output:
Here in the result, we can observe a compilation of celebrations. The text size of the <li> tag will be modified based on the screen dimensions.
Demonstration 2:
We're going to generate an inquiry form in this example. The font-size of the <label> element will be specified using the vw unit, while the height and width of the input elements will be defined using the vw unit as well.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Setting style of an inquiry form utilizing VW</title>
<style>
body {
font-family: Verdana, Tahoma, sans-serif;
background-color: aquamarine;
}
label {
font-size: 3vw;
}
#email, #name {
height: 3vw;
width: 40vw;
}
#country-code {
height: 3vw;
width: 6vw;
}
#mobile {
height: 3vw;
width: 34vw;
}
#message {
height: 10vw;
width: 40vw;
}
#submit {
height: 5vw;
width: 10vw;
font-size: 2vw;
background-color: rgb(12, 63, 63);
color: aliceblue;
}
</style>
</head>
<body>
<h1>Inquiry Form</h1>
<form>
<label for="name">Your Name :</label>
<input type="text" id="name"/> <br> <br>
<label for="email-id">Email Id : </label>
<input type="email" id="email" name="email"/> <br> <br>
<label>Mobile No. :</label>
<input type="text" id="country-code" name="country-code" value="+91" size="2"/>
<input type="text" id="mobile" name="mobile" size="10"/> <br> <br>
<label for="name">Your Name :</label>
<textarea name="message" id="message">Type your message?</textarea> <br> <br> <br>
<input type="button" id="submit" value="Submit"/>
</form>
</body>
</html>
Output:
Here is the outcome where we can observe a request form. The text size of the <label> tag and the dimensions of the input elements will be modified according to the screen's dimensions.
Demonstration 3:
We are going to generate two <p> components in this example, following which we will set the font-size and height of Paragraph-1 using viewport width (vw) units, and specify the font-size and width of Paragraph-2 using viewport width (vw) units.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Setting the style to the paragraphs utilizing viewport width</title>
<style>
body {
font-family: Verdana, Tahoma, sans-serif;
background-color: beige;
}
p {
border: 1px dashed brown;
}
.paragraph-1 {
font-size: 5vw;
height: 25vw;
}
.paragraph-2 {
font-size: 10vw;
width: 50vw;
}
</style>
</head>
<body>
<h1>Paragraph-1</h1>
<p class="paragraph-1">We have set the font-size of this paragraph as 5vw and height of this paragraph as 25vw.</p>
<h1>Paragraph-2</h1>
<p class="paragraph-1">We have set the font-size of this paragraph as 10vw and width of this paragraph as 50vw.</p>
</body>
</html>
Output:
Here is the result showcasing paragraphs that will be adapted based on the screen size.
Demonstration 4:
We will create a table in this example and define the font size of the <table> element using the vw unit.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Applying the style to the table utilizing viewport width</title>
<style>
body {
font-family: Verdana, Tahoma, sans-serif;
background-color: blueviolet;
}
table, td, th {
border: 1px dashed white;
}
table {
font-size: 3vw;
}
</style>
</head>
<body>
<h1>Products Table</h1>
<table>
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Product Quantity</th>
<th>Product Price</th>
</tr>
<tr>
<td>501</td>
<td>Laptop</td>
<td>2</td>
<td>1,00,000</td>
</tr>
<tr>
<td>502</td>
<td>Refrigerator</td>
<td>1</td>
<td>60,000</td>
</tr>
<tr>
<td>503</td>
<td>Washing Machine</td>
<td>2</td>
<td>40,000</td>
</tr>
<tr>
<td>504</td>
<td>Air Conditioner</td>
<td>4</td>
<td>2,25,000</td>
</tr>
<tr>
<td>505</td>
<td>Microwave Oven</td>
<td>5</td>
<td>1,25,000</td>
</tr>
</table>
</body>
</html>
Output:
Here is the displayed result containing a table, and the text size of the <table> element will be adapted based on the screen's dimensions.
Demonstration 5:
In this example, we will create a grid layout and define the padding and font size of the grid items using the VW unit.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Creating a grid and applying style to the grid utilizing viewport width</title>
<style>
body {
font-family: Verdana, Tahoma, sans-serif;
background-color: rgb(222, 201, 242);
}
.container {
border: 1px dashed white;
display: grid;
grid-template-columns: auto auto auto;
}
.item {
background-color: rgb(129, 177, 177);
border: 1px dashed black;
padding: 2vw;
font-size: 3vw;
}
</style>
</head>
<body>
<h1>Grid</h1>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
</html>
Output:
Here is the result where you can observe a grid layout, with the padding and text size of the grid items being dynamically adjusted based on the screen size.
Demonstration 6:
We will add a picture to this diagram and define the height and width of the <img> element using the vw unit.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Inserting an image and setting its style utilizing viewport width</title>
<style>
body {
font-family:'Segoe UI', Tahoma, sans-serif;
background-color: rgb(248, 198, 224);
}
img {
height: 40vw;
width: 60vw;
}
</style>
</head>
<body>
<h1>Landscape</h1>
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Landscape">
</body>
</html>
Output:
Here is the result where we can view an illustration, and the dimensions of the <img> element will be altered based on the screen's size.
Browsers Support:
Following are the browsers that support viewport width (VW):
- Google Chrome
- Opera
- Internet Explorer
- Safari
- Microsoft Edge
- Firefox
Conclusion
In this guide, we have explored the viewport width unit in CSS with practical examples. The VW unit represents a percentage of the viewport width and plays a crucial role in designing responsive web pages.
