VW in CSS

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 VW is a very useful unit because it helps in making a responsive webpage. If we set the element's unit in vw, then the width will be adjusted on the basis of the screen size. That means if the screen is of a computer, then vw will adjust according to the screen of the computer, and if the screen is of a tablet, then vw will adjust according to the screen of the tablet.

Demonstrations of Utilizing the VW Unit

We will comprehend vw in CSS with the help of demonstrations.

Demonstration 1:

We will create a list in this demonstration and set the font-size of the <li> element in 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 Pooja </li>
        <li> Dussehra </li>
        <li> Basant Panchmi </li>
        <li> Mahashivratri </li>
        <li> Janmashtami </li>
    </ul>
</body>
</html>

Output:

Here in the output we can witness a list of festivals. The font-size of the <li> element will be adjusted as per the size of the screen.

Demonstration 2:

We will create an inquiry form in this demonstration. We will set the font-size of the <label> element in the vw unit and we will set the height and width of the input elements utilizing the vw unit.

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 result where we can witness an inquiry form. The font-size of the <label> element and height & width of the input elements will be adjusted on the basis of the size of the screen.

Demonstration 3:

We will create two <p> elements in this illustration, and then we will define the font-size and height of Paragraph-1 in vw and define the font-size and width of Paragraph-2 in vw.

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 output where we can witness paragraphs which will be adjusted on the basis of the size of the screen.

Demonstration 4:

We will construct a table in this illustration and specify the font-size of the <table> element utilizing 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 output where we can witness a table, and the font size of the <table> element will be adjusted as per the size of the screen.

Demonstration 5:

In this illustration, we will construct a grid and specify the padding and font size of the grid items in 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 output in which we can witness a grid, and the padding & font size of the grid items will be adjusted as per the size of the screen.

Demonstration 6:

We will insert an image in this illustration and specify the height and width of the <img> element utilizing 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="landscape.jpg" alt="Landscape">
</body>
</html>

Output:

Here is the output where we can witness an image, and the height & width of the <img> element will be adjusted as per the size of the screen.

Browsers Support:

Following are the browsers that support viewport width (VW):

Google Chrome
Opera
Internet Explorer
Safari
Microsoft Edge
Firefox

Conclusion

In this article, we have understood the VW in CSS through demonstrations. The VW denotes the percentage of the viewport width and helps create a responsive webpage.

Next TopicBEM CSS

← prev next →