CS Basics: Responsive Web Design Using Media Query

Why Responsive Design Matters

The web is accessed through countless devices - smartphones, tablets, laptops, PCs, and even smart TVs. Each has a unique viewport size, so developers must ensure websites adapt seamlessly to all of them.

Media Queries are the core CSS tool for responsive design. They allow you to apply specific styles depending on the device's screen size or characteristics.

The @media Rule

The @media rule applies styles conditionally. For example, the background color changes when the screen width is 500px or less:

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

Here, 500px is the breakpoint - the screen width where layout changes occur.

Defining Breakpoints

There's no single set of "perfect" breakpoints, as devices constantly evolve. Developers usually define a set of viewport ranges to handle common screen sizes.

a) Standard Breakpoints (Fluid Layouts)

@media all and (max-width: 1690px) { ... }
@media all and (max-width: 1280px) { ... }
@media all and (max-width: 980px)  { ... }
@media all and (max-width: 736px)  { ... }
@media all and (max-width: 480px)  { ... }

b) Standard Breakpoints (Complex Layouts)

@media all and (min-width:1200px){ ... }
@media all and (min-width:960px) and (max-width:1199px){ ... }
@media all and (min-width:768px) and (max-width:959px){ ... }
@media all and (min-width:480px) and (max-width:767px){ ... }
@media all and (max-width:599px){ ... }
@media all and (max-width:479px){ ... }

c) Bootstrap 3.x Breakpoints

@media all and (max-width: 991px) { ... }
@media all and (max-width: 768px) { ... }
@media all and (max-width: 480px) { ... }

d) Bootstrap 4.x Breakpoints

@media all and (max-width: 1199px) { ... }
@media all and (max-width: 991px)  { ... }
@media all and (max-width: 768px)  { ... }
@media all and (max-width: 575px)  { ... }

e) Material Design Lite (MDL) Breakpoints

@media all and (max-width: 1024px) { ... }
@media all and (max-width: 839px)  { ... }
@media all and (max-width: 480px)  { ... }

f) Retina Displays (@2x)

@media (-webkit-min-device-pixel-ratio:1.5),
       (min--moz-device-pixel-ratio:1.5),
       (-o-min-device-pixel-ratio:3/2),
       (min-resolution:1.5dppx) { ... }

Source: UIUXLab on Medium

FreeCodeCamp's Simplified Method

A FreeCodeCamp article suggests simple, broad ranges that cover most modern devices using just four main breakpoints: 600px, 900px, 1200px, and 1800px.

These can easily be implemented with Sass mixins for cleaner, reusable media query logic.

@mixin for-size($size) {
  @if $size == phone {
    @media (max-width: 600px) { @content; }
  } @else if $size == tablet {
    @media (max-width: 900px) { @content; }
  } @else if $size == desktop {
    @media (max-width: 1200px) { @content; }
  } @else if $size == large {
    @media (max-width: 1800px) { @content; }
  }
}

Testing Your Layout

You can preview how your site looks across various screen sizes using tools like the Viewport Emulator.

Testing ensures elements scale smoothly and remain user-friendly across mobile, tablet, and desktop views.

Next in the Series

With the basics of responsive design covered, let's move on to preprocessors, specifically SASS

Continue to An Overview of SASS →