Just started your web development journey and feeling overwhelmed by media queries? Don’t worry — you’re in the right place!

This quick guide will walk you through the basics of media queries, one of the most essential tools in building responsive websites.

What Are Media Queries?

As beginners, we all struggle with certain concepts — be it the CSS box model or making our websites responsive. Media queries are a key part of responsive web design. If you're new to this, mastering media queries early on will make your learning journey smoother and your websites more adaptive.

One common and efficient approach is mobile-first development — you write styles for mobile devices first, then enhance them for larger screens like tablets and desktops. This technique often leads to faster loading websites on mobile devices.

To make a site responsive, we use the @media rule in CSS. It allows you to apply styles conditionally — only when certain criteria (like screen size or orientation) are met.

A Brief History

CSS2 introduced the @media rule, but it had limited support and was mainly used for print styles.
CSS3 expanded this concept with media queries, allowing developers to target styles based on device capabilities — like screen width, input type (touch or mouse), and more.

This shift from targeting device type to device capability made web design much more flexible and user-friendly.

Media Query: Basic Syntax

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

For example:

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

Common Media Types

all – Targets all devices
print – Styles intended for printing
screen – Screens like desktops, tablets, and phones
speech – Screen readers and other speech-based devices

Where to Place Media Queries?

You have a few options when it comes to organizing media queries:

At the Bottom of Your CSS File:
A common practice is to write all media queries at the end of your stylesheet. This keeps your responsive logic in one place.
Grouped with Related Styles:
Another approach is to place each media query just below the base style it modifies. This is especially helpful when using CSS preprocessors like Sass or Less for better structure.
In a Separate CSS File:
You can also write media queries in a separate file and import it:
- Using @import within CSS:
```
  @import url("responsive.css") screen and (max-width: 768px);
```
- Or, using a <link> tag in your HTML with the media attribute:
```
  <link rel="stylesheet" href="responsive.css" media="screen and (max-width: 768px)">
```

Final Thoughts

Media queries are a cornerstone of modern web design. They help your site adapt to various devices and ensure a smooth user experience everywhere — from phones to large monitors.

Whether you're styling for screens or print, mobile-first or desktop-down, learning how and when to use media queries will make your websites look and feel polished on any device.

Introduction to Media Queries

Table of contents