Academy / Intermediate Level: HTML and CSS

HTML Elements and Semantic Structure

Responsive Web Design with Media Queries

Responsive Web Design is the practice of building websites that adapt and respond to different screen sizes, ensuring an optimal viewing experience across a wide range of devices, from desktop monitors to mobile phones. A key tool for achieving this is CSS media queries. Media queries allow you to apply CSS styles based on characteristics of the user's device, such as screen width, height, or orientation.

In this section, we will cover the essentials of media queries, explore how they work, and walk through practical examples of how to implement responsive designs.

What You Will Learn:

  1. What Are Media Queries?
  2. How Media Queries Work
  3. Breakpoints in Responsive Design
  4. Media Query Syntax
  5. Creating Responsive Layouts with Media Queries
  6. Using Viewport Units and calc() for Responsive Design
  7. Common Patterns in Responsive Web Design

1. What Are Media Queries?

Media queries allow you to apply specific CSS rules based on the properties of the device that is displaying the webpage. For example, you can change the layout, font size, or image scaling depending on whether the user is viewing the website on a mobile phone, tablet, or desktop.

This is essential for responsive web design, where the goal is to ensure the webpage looks good and is easy to navigate on all devices.

Example Use Case:

  • On a large screen (like a desktop), you might want to display content in multiple columns.
  • On a small screen (like a mobile phone), you may switch to a single-column layout for better readability.

2. How Media Queries Work

Media queries allow CSS to respond to various conditions, such as:

  • Viewport width and height (min-width, max-width)
  • Device orientation (portrait, landscape)
  • Device resolution (min-resolution, max-resolution)
  • Aspect ratio (min-aspect-ratio, max-aspect-ratio)

You can set breakpoints at which the layout changes to adapt to the current screen size or other characteristics.

3. Breakpoints in Responsive Design

Breakpoints are the points at which your design "breaks" or adjusts to accommodate a different screen size. These are usually defined by the width of the viewport and are commonly used to switch layouts at specific widths.

Common Breakpoints:

  • Mobile (small devices): max-width: 600px
  • Tablets (medium devices): min-width: 601px and max-width: 1024px
  • Desktop (large devices): min-width: 1025px

Breakpoints are not fixed rules, and you can adjust them depending on the design of your site and the types of devices your audience uses.

4. Media Query Syntax

Media queries are written using the @media rule in CSS. Here’s a basic syntax example:

@media (max-width: 768px) {
  /* CSS rules for devices with a screen width of 768px or less */
  body {
    font-size: 14px;
  }
}

@media (min-width: 769px) {
  /* CSS rules for devices with a screen width of 769px or more */
  body {
    font-size: 18px;
  }
}
  • max-width: Targets devices with a width up to a certain size.
  • min-width: Targets devices with a width greater than or equal to a certain size.

You can also combine conditions using and:

@media (min-width: 601px) and (max-width: 1024px) {
  /* CSS for tablets */
}

5. Creating Responsive Layouts with Media Queries

Let’s walk through some practical examples to demonstrate how media queries can create responsive layouts.

Example 1: Responsive Font Size

You can adjust the font size based on the device size for better readability.

body {
  font-size: 16px; /* Default font size for large screens */
}

@media (max-width: 600px) {
  body {
    font-size: 14px; /* Smaller font for mobile devices */
  }
}

Example 2: Responsive Two-Column Layout for Desktop, Single-Column for Mobile

This example switches from a two-column layout on larger screens to a single-column layout on smaller screens.

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
</div>
cssCopy code/* Default two-column layout for larger screens */
.container {
  display: flex;
}

.column {
  flex: 1; /* Each column takes up half the available space */
  padding: 20px;
}

/* Single-column layout for mobile devices */
@media (max-width: 600px) {
  .container {
    display: block;
  }

  .column {
    width: 100%;
    padding: 10px;
  }
}

Example 3: Changing Navigation Styles on Mobile

On a large screen, the navigation menu can be displayed horizontally, but on smaller screens, you might want a vertical, stacked menu.

/* Horizontal navigation for desktop */
nav ul {
  display: flex;
  justify-content: space-around;
  list-style-type: none;
}

/* Stacked navigation for mobile devices */
@media (max-width: 600px) {
  nav ul {
    display: block;
  }

  nav ul li {
    margin-bottom: 10px;
  }
}

6. Using Viewport Units and calc() for Responsive Design

In addition to media queries, you can use viewport units (vw, vh, vmin, vmax) and the calc() function to create responsive layouts. These units are relative to the viewport size, making them perfect for responsive design.

Viewport Units:

  • vw: 1% of the viewport width.
  • vh: 1% of the viewport height.
  • vmin: 1% of the smaller dimension (width or height).
  • vmax: 1% of the larger dimension (width or height).

Example: Responsive Typography with Viewport Units

h1 {
  font-size: 4vw; /* The font size is 4% of the viewport width */
}

Example: Using calc() for Responsive Padding

.container {
  padding: calc(10px + 2vw); /* Combines a fixed value with a responsive one */
}

7. Common Patterns in Responsive Web Design

Here are some common design patterns you can implement with media queries:

Fluid Grids:

A fluid grid system uses percentages for column widths, allowing the layout to adjust fluidly to different screen sizes.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid columns */
  gap: 20px;
}

Responsive Images:

Images should scale appropriately with screen size. You can achieve this using the max-width property.

img {
  max-width: 100%; /* Prevents the image from exceeding its container’s width */
  height: auto; /* Keeps the aspect ratio */
}

Mobile-First Approach:

In a mobile-first approach, you design for the smallest screens first and use media queries to progressively enhance the design for larger screens.

/* Mobile-first styles */
.container {
  padding: 10px;
}

/* Styles for tablets and larger screens */
@media (min-width: 600px) {
  .container {
    padding: 20px;
  }
}

/* Styles for desktops */
@media (min-width: 1024px) {
  .container {
    padding: 40px;
  }
}

Key Takeaways

  • Media queries allow you to apply specific CSS rules based on the screen size, resolution, or orientation of the user's device, ensuring a responsive design.
  • Use breakpoints to adjust your layout at various screen widths, such as mobile, tablet, and desktop.
  • Viewport units and the calc() function can help create truly flexible designs that scale with the browser window.
  • Following a mobile-first approach ensures that your design starts simple and scales up for larger devices, improving performance and user experience.