Skip to content
Related Articles

Related Articles

What is RWD(Responsive Web Design) ?

View Discussion
Improve Article
Save Article
  • Last Updated : 31 May, 2022
View Discussion
Improve Article
Save Article

In this article, we will learn about Responsive Web Design(RWD). It is the most important approach in web development which creates dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it. A website that is responsive in nature looks good on every device.

What are the languages required to make a website responsive?

You will be thinking that you need some complex language to make your website responsive. So the answer is “NO” you don’t have to learn too many complex computer languages. For making your website you just need basic HTML and CSS. It is not a program or JavaScript.

Why it is recommended by web developers that always make responsive websites?

The reason behind this thought is there are so many devices that have different resolutions like smartphones, tablets, desktops, and smartwatches. Your need to design your website in such a way that your web application will look good on every device. If Your website is not responsive then your UI will not look good on other devices. It is not compulsory that the website you are using is the same on other devices. For example – If you are looking at this article on your computer then you can see everything is good but now if you open this same article on your phone then you can find that the UI has changed. This is because the website is responsive everything is aligned properly. 

User Interface of GeeksforGeeks on desktop –

 

User Interface of GeeksforGeeks on a mobile phone –

 

You can notice from the above two images that the webpage is the same but the user interface is different. This is called a responsive website.

Example: In the below example we are going to make a responsive website in which the div element will start to shrink when we resize the resolution of the page.

HTML




<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
    <style>
        body {
            background-color: black;
            text-align: center;
        }
        * {
            box-sizing: border-box;
        }
        .row::after {
            content: "";
            clear: both;
            display: table;
        }
        [class*="col-"] {
            float: left;
            padding: 15px;
        }
        html {
            font-family: "Lucida Sans", sans-serif;
        }
        .header {
            background-color: lightgreen;
            color: green;
            padding: 15px;
        }
        .menu ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        .menu li {
            padding: 8px;
            margin-bottom: 7px;
            background-color: grey;
            color: black;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        }
        .menu li:hover {
            background-color: lightgreen;
            color: black;
        }
        .aside {
            background-color: lightgreen;
            padding: 15px;
            color: black;
            text-align: center;
            font-size: 14px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        }
        /* For mobile phones: */
        [class*="col-"] {
            width: 100%;
        }
        @media only screen and (min-width: 600px) {
            /* For tablets: */
            .col-s-1 {
                width: 8.33%;
            }
            .col-s-2 {
                width: 16.66%;
            }
            .col-s-3 {
                width: 25%;
            }
            .col-s-4 {
                width: 33.33%;
            }
            .col-s-5 {
                width: 41.66%;
            }
            .col-s-6 {
                width: 50%;
            }
            .col-s-7 {
                width: 58.33%;
            }
            .col-s-8 {
                width: 66.66%;
            }
            .col-s-9 {
                width: 75%;
            }
            .col-s-10 {
                width: 83.33%;
            }
            .col-s-11 {
                width: 91.66%;
            }
            .col-s-12 {
                width: 100%;
            }
        }
        @media only screen and (min-width: 768px) {
            /* For desktop: */
            .col-1 {
                width: 8.33%;
            }
            .col-2 {
                width: 16.66%;
            }
            .col-3 {
                width: 25%;
            }
            .col-4 {
                width: 33.33%;
            }
            .col-5 {
                width: 41.66%;
            }
            .col-6 {
                width: 50%;
            }
            .col-7 {
                width: 58.33%;
            }
            .col-8 {
                width: 66.66%;
            }
            .col-9 {
                width: 75%;
            }
            .col-10 {
                width: 83.33%;
            }
            .col-11 {
                width: 91.66%;
            }
            .col-12 {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>GeeksforGeeks</h1>
    </div>
    <div class="row">
        <div class="col-3 col-s-3 menu">
            <ul>
                <li>Java</li>
                <li>C++</li>
                <li>CSS</li>
                <li>HTML</li>
            </ul>
        </div>
        <div class="col-3 col-s-12">
            <div class="aside">
                <h2>What?</h2>
                <p>GeeksforGeeks.org was created with a goal 
                    in mind to provide well written, well 
                    thought and well explained solutions for 
                    selected questions. The core team of five 
                    super geeks constituting of technology 
                    lovers and computer science enthusiasts 
                    have been constantly working in this direction
                </p>
  
                <h2>Where?</h2>
                <p>
                    5th Floor, A-118, Sector 136, Noida, 
                    Uttar Pradesh 201305
                </p>
  
            </div>
        </div>
    </div>
</body>
</html>


Output:

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!