Chapter 11: Responsive Design with Media Queries

Responsive design is a technique used to create web layouts that adapt to different screen sizes and devices, ensuring a consistent and optimal user experience across various platforms. Media queries are a key component in responsive design, allowing you to apply different styles based on the characteristics of the device displaying the content.

1. Introduction to Responsive Design

Responsive design involves using flexible grids, layouts, images, and CSS media queries to make web pages render well on a variety of devices and window or screen sizes. The goal is to ensure that users have a good experience whether they are using a desktop, tablet, or smartphone.

2. What Are Media Queries?

Media queries are CSS techniques used to apply styles based on the conditions of the device or viewport. They help in creating responsive designs by allowing you to specify different styles for different devices or screen sizes.

3. Syntax of Media Queries

The basic syntax of a media query consists of the @media rule, which is followed by one or more conditions and corresponding CSS rules.

@media (condition) {
  /* CSS rules */
}

Basic Media Query Example

/* Styles for screens smaller than 600px */
@media (max-width: 599px) {
  body {
    background-color: lightblue;
  }
}

4. Common Media Features

Media queries use various features to apply styles based on device characteristics.

Width and Height

min-width: The minimum width of the viewport.
max-width: The maximum width of the viewport.
min-height: The minimum height of the viewport.
max-height: The maximum height of the viewport.

/* Apply styles if the viewport is at least 600px wide */
@media (min-width: 600px) {
  .container {
    padding: 20px;
  }
}

/* Apply styles if the viewport is less than 600px wide */
@media (max-width: 599px) {
  .container {
    padding: 10px;
  }
}

Orientation

orientation: The orientation of the device (portrait or landscape).

/* Apply styles for devices in landscape orientation */
@media (orientation: landscape) {
  .container {
    flex-direction: row;
  }
}

/* Apply styles for devices in portrait orientation */
@media (orientation: portrait) {
  .container {
    flex-direction: column;
  }
}

Resolution

resolution: The resolution of the device (e.g., dpi or dppx).

/* Apply styles for devices with a resolution of 2dppx or higher */
@media (min-resolution: 2dppx) {
  .logo {
    background-image: url("logo@2x.png");
  }
}

5. Media Query Breakpoints

Breakpoints are specific screen widths where the layout needs to change to provide a better user experience. Common breakpoints are based on typical device widths.

/* Mobile devices (up to 600px) */
@media (max-width: 600px) {
  /* Styles */
}

/* Tablets (600px to 900px) */
@media (min-width: 601px) and (max-width: 900px) {
  /* Styles */
}

/* Desktops (900px and above) */
@media (min-width: 901px) {
  /* Styles */
}

6. Mobile-First vs. Desktop-First

Mobile-First: Start by designing for the smallest screen sizes and use min-width media queries to add styles as the viewport grows. This approach is more in line with responsive design principles.

/* Base styles (mobile-first) */
body {
  font-size: 16px;
}

/* Styles for tablets and up */
@media (min-width: 600px) {
  body {
    font-size: 18px;
  }
}

/* Styles for desktops and up */
@media (min-width: 900px) {
  body {
    font-size: 20px;
  }
}

Desktop-First: Start with styles for larger screens and use max-width media queries to adjust styles for smaller screens.

/* Base styles (desktop-first) */
body {
  font-size: 20px;
}

/* Styles for tablets */
@media (max-width: 899px) {
  body {
    font-size: 18px;
  }
}

/* Styles for mobile devices */
@media (max-width: 599px) {
  body {
    font-size: 16px;
  }
}

7. Responsive Design Techniques

Fluid Layouts

Use relative units like percentages, em, and rem instead of fixed units like pixels to create fluid layouts that adapt to different screen sizes.

.container {
  width: 100%;
  padding: 2%;
}

Flexible Images

Ensure images scale appropriately by using relative units and setting the max-width property.

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

Responsive Typography

Use responsive units and media queries to adjust font sizes based on the viewport size.

body {
  font-size: 16px;
}

@media (min-width: 600px) {
  body {
    font-size: 18px;
  }
}

@media (min-width: 900px) {
  body {
    font-size: 20px;
  }
}

8. Practical Examples

Responsive Grid Layout

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 10px;
}

.item {
  background-color: #007bff;
  color: #fff;
  padding: 20px;
}

@media (min-width: 600px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .grid-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

Responsive Navigation Menu

<nav class="navbar">
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

.navbar {
  background-color: #007bff;
}

.menu {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu li {
  margin: 0 10px;
}

.menu a {
  color: #fff;
  text-decoration: none;
}

@media (max-width: 600px) {
  .menu {
    flex-direction: column;
    align-items: center;
  }

  .menu li {
    margin: 10px 0;
  }
}

Conclusion

Media queries are essential for responsive design, allowing you to tailor styles to different devices and screen sizes. By using media queries effectively, you can create flexible and adaptive layouts that enhance the user experience across a wide range of devices.