CSS RWD Introduction

Quiz

Responsive Web Design (RWD) is an approach of designing web applications that render accurately on various devices with different screen sizes and resolutions.

What is Responsive Web Design?

Responsive web design ensure the webpage to look good in any user devices such as mobile, tablets, smart TVs and PCs.
To make a webpage responsive we can just use HTML and CSS. We don't need to use programming languages like JavaScript.
CSS frameworks like bootstrap and tailwind CSS can simplify the process of making responsive designs.

Example of Responsive Webpage

Here is a complete example code explaining how to develop a simple responsive webpage using HTML and CSS. In the code given below, we have used media queries to define style for small screens.

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

<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-rows: 100px 200px 50px;
            grid-template-columns: 100px 1fr 1fr;
            grid-template-areas:
                "header header header"
                "sidebar content content"
                "footer footer footer";
            gap: 10px;
            background-color: lightgray;
            padding: 10px;
        }
        .grid-item {
            background-color: lightcoral;
            padding: 20px;
            text-align: center;
        }
        .header {
            grid-area: header;
        }
        .sidebar {
            grid-area: sidebar;
        }
        .content {
            grid-area: content;
        }
        .footer {
            grid-area: footer;
        }

        /* Responsive design for screens smaller than 768px */
        @media (max-width: 768px) {
            .grid-container {
                grid-template-columns: 1fr;
                grid-template-rows: auto;
                grid-template-areas:
                    "header"
                    "content"
                    "sidebar"
                    "footer";
            }
        }
    </style>
</head>

<body>
    <div class="grid-container">
        <div class="grid-item header">Header</div>
        <div class="grid-item sidebar">Sidebar</div>
        <div class="grid-item content">Content Area</div>
        <div class="grid-item footer">Footer</div>
    </div>
</body>

</html>

Output

RWD Example

Responsive Web Design Concepts

We have mentioned below a list of concepts and techniques that are used in CSS for responsive web designing.

Media Queries: We use media queries to apply CSS rules based on device characteristics, such as screen width, height, or orientation (landscape or portrait). We can define different styles for different devices by using media queries.
Responsive Grid Layouts: We use responsive grid layouts, to alter the number of columns in layout dynamically based on dimensions of user devices. CSS frameworks such as Bootstrap, provide inbuilt grid systems that can automatically adjust the layout based on the screen size.
Responsive Images & Videos: To ensure images and videos are rendered properly in all user devices, we have to set a max-width property. It prevents stretching of media in large screens.
Viewport Meta Tag: The viewport meta tag is used in the HTML <head> section. It controls the viewport behavior and scale on mobile devices. It is important for proper rendering based on various screen sizes.

Print Page