Responsive design ensures that web pages look good on all devices by adjusting layouts based on screen size, orientation, and resolution. This involves using media queries, responsive units, and layout techniques like Flexbox and Grid.

1. Media Queries

Media queries in CSS apply different styles based on the characteristics of the device, such as screen width, height, and resolution.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media Queries Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        .container {
            background-color: lightgray;
            padding: 20px;
        }

        @media (max-width: 600px) {
            .container {
                background-color: lightcoral;
                padding: 10px;
            }
        }

        @media (min-width: 601px) and (max-width: 1200px) {
            .container {
                background-color: lightblue;
                padding: 15px;
            }
        }

        @media (min-width: 1201px) {
            .container {
                background-color: lightgreen;
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">Resize the window to see different background colors.</div>
</body>
</html>

2. Mobile-First vs. Desktop-First Approach

Mobile-First Approach: Styles are designed for mobile devices first, then scaled up for larger screens using media queries.

Desktop-First Approach: Styles are designed for larger screens first, then scaled down for mobile devices using media queries.

Mobile-First Approach Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mobile-First Approach Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        .container {
            background-color: lightblue;
            padding: 10px;
        }

        @media (min-width: 601px) {
            .container {
                background-color: lightgreen;
                padding: 15px;
            }
        }

        @media (min-width: 1201px) {
            .container {
                background-color: lightcoral;
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">Resize the window to see different background colors.</div>
</body>
</html>

Desktop-First Approach Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Desktop-First Approach Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        .container {
            background-color: lightcoral;
            padding: 20px;
        }

        @media (max-width: 1200px) {
            .container {
                background-color: lightgreen;
                padding: 15px;
            }
        }

        @media (max-width: 600px) {
            .container {
                background-color: lightblue;
                padding: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">Resize the window to see different background colors.</div>
</body>
</html>

3. Responsive Units (em, rem, vh, vw)

Responsive units allow elements to scale based on viewport size or font size.

  • em: Relative to the font-size of the parent element.
  • rem: Relative to the font-size of the root element (<html>).
  • vh: Relative to 1% of the viewport height.
  • vw: Relative to 1% of the viewport width.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Units Example</title>
    <style>
        body {
            font-size: 16px;
        }

        .responsive-box {
            width: 50vw; /* 50% of viewport width */
            height: 50vh; /* 50% of viewport height */
            margin: 1rem; /* 1rem relative to root font size */
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="responsive-box">This box adjusts its size based on viewport dimensions and root font size.</div>
</body>
</html>

4. Flexbox and Grid for Responsive Layouts

Flexbox and Grid are powerful layout tools for creating responsive designs.

Flexbox Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Example</title>
    <style>
        .flex-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            gap: 10px;
        }

        .flex-item {
            flex: 1 1 200px; /* Grow, shrink, basis */
            background-color: lightcoral;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">Item 1</div>
        <div class="flex-item">Item 2</div>
        <div class="flex-item">Item 3</div>
    </div>
</body>
</html>

Grid Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Example</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 10px;
        }

        .grid-item {
            background-color: lightgreen;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">Item 1</div>
        <div class="grid-item">Item 2</div>
        <div class="grid-item">Item 3</div>
    </div>
</body>
</html>