RWD Media Queries

Responsive Web Design - Media Queries

What are Media Queries?

Media Queries are a core feature of Responsive Web Design (RWD). They allow you to apply CSS rules conditionally, based on characteristics of the device or viewport, such as its width, height, orientation, or resolution.

They use the @media rule to encapsulate CSS blocks that only apply when the specified conditions are true.

Basic Syntax:

@media media-type and (media-feature: value) {
  /* CSS rules to apply when condition is met */
  selector {
    property: value;
  }
}

Example: Change background color on small screens (max-width 600px).

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

Implementing Breakpoints

A breakpoint is a point (usually a specific viewport width) where the layout or styling of a website changes to adapt to different screen sizes.

Media queries are used to define these breakpoints. For example, you might have a multi-column layout on desktops that stacks into a single column on mobile phones.

Common practice: Define base styles first, then use min-width media queries to add complexity for larger screens (Mobile First approach).

[Imagine a layout with 3 columns side-by-side on desktop, stacking vertically on mobile]

Example: Simple Column Layout with a Breakpoint

/* Default (Mobile) styles: Single column */
.column {
  width: 100%;
  margin-bottom: 1em;
  background-color: lightgray; /* Just for visibility */
  padding: 1em;
}

/* Tablet and larger screens (min-width: 768px) */
@media screen and (min-width: 768px) {
  .row {
    display: flex; /* Use Flexbox for columns */
    gap: 1em; /* Space between columns */
  }

  .column {
    flex: 1; /* Make columns share space equally */
    margin-bottom: 0; /* Remove bottom margin when side-by-side */
  }
}

In this example, columns are full-width by default. When the screen width is 768px or more, the @media rule applies, using Flexbox to arrange the columns side-by-side.

Mobile First Design Principle

Designing ‘Mobile First’ means starting with the base CSS for the smallest screens (mobile) and then adding complexity for larger screens using min-width media queries.

Benefits:

• Performance: Mobile devices download simpler, essential styles first.
• Progressive Enhancement: Ensures a functional experience on all devices, adding features for capable browsers/larger screens.
• Cleaner Code: Often leads to less overriding of styles.

The previous column example followed the Mobile First approach.

Common Media Features

Besides width, you can use various media features:

• min-width / max-width: Based on viewport width.
• min-height / max-height: Based on viewport height.
• orientation: portrait or landscape.
• aspect-ratio / min-aspect-ratio / max-aspect-ratio: Ratio of width to height.
• resolution: Screen resolution (e.g., min-resolution: 2dppx for high-density displays).
• prefers-color-scheme: light or dark (for supporting dark mode).
• prefers-reduced-motion: no-preference or reduce (for accessibility).

You can combine features using and, or (comma-separated), and not.

Example: Styles for landscape orientation on tablets or larger:

@media screen and (min-width: 768px) and (orientation: landscape) {
  /* Specific styles for wide, landscape viewports */
}

Example: Supporting Dark Mode:

body {
  background-color: white;
  color: black;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: white;
  }
}

Choosing Breakpoints

Instead of targeting specific device widths (which change constantly), it’s generally better to choose breakpoints based on when your content or layout starts to look awkward or breaks.

Common starting points might be around:

• ~600px (Large phones / Small tablets)
• ~768px (Tablets)
• ~992px (Small desktops / Large tablets)
• ~1200px (Desktops)

However, always adjust based on your specific design needs.