Media queries are a core feature of responsive web design. They allow your website to adapt its layout depending on the size or characteristics of the device it’s being viewed on. Whether someone is browsing your site on a phone, tablet, or widescreen monitor, media queries help ensure it looks and functions the way it should. If you've ever noticed a menu changing to a hamburger icon on mobile—that’s a media query in action.

They’re written in CSS and are used to apply specific styles only when certain conditions are met. These conditions are often related to screen width, height, resolution, or even orientation (like portrait or landscape). This approach lets web designers avoid creating separate versions of a site for different devices. Instead, you create one site that intelligently responds to the user’s setup.

How media queries work in CSS

Media queries work by checking the device's capabilities and applying different sets of CSS rules accordingly. The syntax usually follows this format: @media (condition) { CSS rules here }. You can have multiple queries to target various screen sizes, like tablets or smartphones.

For example, a common setup might include:

css

CopyEdit

/* Desktop styles */

body {

  font-size: 18px;

}

`@media (max-width: 768px) {`

`  body {`

`    font-size: 16px;`

`  }`

`}`

In this case, the second rule only kicks in if the screen width is 768 pixels or less. This allows the site’s content to stay readable and user-friendly on smaller screens. Media queries give designers control without needing JavaScript or separate mobile domains.

## Why media queries are important for responsive design

In the era of smartphones, tablets, and ever-changing screen sizes, media queries are what make websites feel modern and seamless. Without them, you'd risk your content looking broken or unreadable on non-desktop devices. They help ensure a consistent experience, which keeps visitors engaged and reduces bounce rates.

Media queries also make it easier to manage design changes in one place. Instead of creating different versions of a page, you use conditional styles to tweak layout, text size, or image behavior depending on the screen. This results in a more maintainable and scalable design system. It also improves your site’s accessibility and user experience—both of which are great for [SEO](https://www.b12.io/seo/).

## Common use cases for media queries

Media queries can do much more than just shrink text or move a sidebar. Here are a few ways designers use them:

* Switching from a horizontal layout to a vertical one on smaller screens.
* Hiding non-essential elements on mobile to improve speed and clarity.
* Adjusting image sizes to prevent slow load times.
* Modifying navigation menus for mobile interaction (e.g., turning them into a dropdown or hamburger menu).
* Changing padding and margins to fit different screen shapes.

They're also helpful for testing how designs behave across breakpoints and ensuring content remains visually balanced.

## Best practices when using media queries

Here are some tips to get the most out of your media queries:

* Start with mobile-first styles, then layer on more complex styles for larger screens using `min-width`.
* Group related styles together by breakpoint to stay organized.
* Avoid hardcoding device-specific widths (like 1024px for tablets). Instead, design around your content's natural flow.
* Test thoroughly on actual devices, not just browser emulators. Real-world testing will catch issues you might miss otherwise.

Media queries should make your design feel smooth, not hacked together. Keeping your CSS clean and your breakpoints consistent helps maintain a polished, responsive design that works everywhere.

## FAQs about media queries

### What devices do media queries target?

Media queries can target any device based on characteristics like screen width, height, orientation, resolution, and even color capabilities. They're commonly used to adjust designs for smartphones, tablets, laptops, and desktops.

### Do I need JavaScript to use media queries?

Nope! Media queries are part of CSS, so they don’t require any JavaScript. They work automatically when a browser detects a matching condition.

### How many media queries should I use?

There’s no set number, but most sites use 2–5 breakpoints to target key screen ranges (like mobile, tablet, and desktop). The number depends on your layout complexity and how flexible you want your design to be.

### Can I use media queries for print styling?

Yes! Media queries aren’t just for screens—you can also target `print` to define how a webpage looks when someone tries to print it. This helps hide unnecessary elements and improve print readability.

### What’s the difference between min-width and max-width?

`min-width` applies styles starting from a certain screen size and up, while `max-width` applies styles up to a certain size. A mobile-first approach often uses `min-width` so that smaller devices get the base styles and larger devices get enhancements.

## Build smarter websites with less effort

Media queries are just one piece of creating a great-looking, responsive website—but there’s so much more that goes into the full experience. If you’re looking to build a beautiful site without having to wrestle with code, try the [B12 AI website builder](https://www.b12.io/ai-website-builder/). It helps you create professional websites that adapt to every screen size, with built-in tools for [blogging](https://www.b12.io/ai-assist/), SEO, and client engagement.

Let B12 handle the heavy lifting while you focus on running your business. [Get started today](https://b12.io/signup) and build your site in minutes.

<!--EndFragment-->