Responsive Web Design Note

What is Responsive Web Design?

Responsive Web Design (RWD) is an approach to web development that makes web pages automatically adjust and look good on all devices, including desktops, tablets, and mobile phones.

Key Features:

Fluid Grids: Uses relative units like percentages instead of fixed pixels.
Flexible Images: Images resize according to their container.
Media Queries: Apply styles based on screen size, resolution, or orientation.
Mobile-First Design: Start with the smallest screen and scale up.

Example media query:

@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

Benefits:

One website works on all devices
Better user experience
No need for multiple versions of a site
Improved SEO

HTML & CSS Example:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
    }

    .box {
      flex: 1 1 300px;
      margin: 10px;
      padding: 20px;
      background-color: #f2f2f2;
      text-align: center;
    }

    @media (max-width: 600px) {
      .box {
        background-color: lightblue;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>
</body>
</html>