How to design a responsive Web Page in HTML ?

Last Updated : 26 Jul, 2024

In this article, we will learn how to design a responsive Web Page in HTML. Responsive web design (RWD) is a web development approach that creates dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it.

RWD can be obtained by using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones).

Creating a responsive webpage in HTML:

We can make our webpage responsive by adding a “viewport“.The viewport does not have any fixed size. It changes according to the screen orientations and sizes.HTML provides a <meta>tag for setting the viewport.

<meta name=’viewport’ content=’width=device-width, initial-scale=1.0′>

For displaying responsive images on the webpage, we can use the <picture>element of HTML. There are some cases where a browser does not or may not support all types of images, at that point the <picture> can be used where the browser chooses the format it can recognize.

For responsive texts, we use viewport width.” vw” is its unit. A viewport is a browser’s window size.

Though using these tags can make your page responsive it’s always better to use CSS framework and Bootstrap. These provide a better look and feel and make your coding easy.

Example: In this example, we will design a responsive web page.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Page Using HTML and CSS</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .container {
            background-color: #4CAF50;
            padding: 20px;
            text-align: center;
        }

        h1,
        h2 {
            color: white;
        }

        p {
            font-size: 1.2rem;
            color: white;
            max-width: 600px;
            margin: 20px auto;
        }

        img {
            max-width: 100%;
            height: auto;
        }

        @media (min-width: 768px) {
            .container {
                padding: 40px;
            }

            h1 {
                font-size: 2.5rem;
            }

            h2 {
                font-size: 1.8rem;
            }

            p {
                font-size: 1.4rem;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Responsive Page Using HTML and CSS</h1>
        <h2>Enhanced for Better Responsiveness</h2>
        <p>
            This is an updated version for GeeksforGeeks, 
            demonstrating responsive design principles.
        </p>
        <picture>
            <source media="(min-width: 768px)"
                srcset=
"https://media.geeksforgeeks.org/wp-content/uploads/20190809013546/gfg_350X350.png">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190809013546/gfg_350X350.png"
                alt="GeeksforGeeks logo" width="200" height="200">
        </picture>
    </div>
</body>

</html>

Output: The title “Responsive Page Using Only HTML” does not change its size irrespective of screen size but the text “This is for Geeks for Geeks” changes according to the screen size. As we have set “vw”, this makes the text responsive.

HTML Viewport meta tag for Responsive Web Design

manasakanda08

Improve

Article Tags :

How to design a responsive Web Page in HTML ?

Similar Reads

Thank You!

What kind of Experience do you want to share?