Media queries are a CSS feature used in responsive web design to apply different styles based on a device’s screen size, resolution, or other properties. This could be anything from the screen's width and height to its orientation (portrait or landscape) and even its resolution. The goal? To create a smooth and user-friendly experience no matter how someone is accessing the site, without having to build completely separate websites for each type of device.

How media queries work

Media queries check for conditions like device width, height, orientation, and screen resolution, and then apply specific CSS rules based on those conditions. Here’s how they’re commonly used:

• Device width and height – Adjust styles when the screen crosses specific breakpoints (e.g., 768px for tablets).
• Orientation – Change layouts for portrait vs. landscape mode.
• Resolution – Optimize for high-DPI screens (like Retina displays).
• Aspect ratio – Tweak designs based on screen proportions.

Why media queries matter 

Media queries are a foundational element of responsive web design. They enable you to create a single website that functions well across most devices, instead of individual desktop and mobile sites. This is more efficient for development time, better for SEO, and maintains consistent user experiences.

A few major benefits:

• Enhance readability on small screens
• Modify navigation for touch-based interfaces
• Reduce load times by concealing non-essential content on mobile
• Make layouts flexible across screen sizes

Examples of using media queries

Here are a few real-world examples of how media queries are used in web design:

• Hiding sidebar menus on mobile: Many sites simplify their layout on smaller screens by hiding sidebars and showing a mobile menu instead.
• Adjusting image sizes: Hero images or content images can be scaled down or swapped out to load faster on mobile connections.
• Changing grid layouts: A multi-column layout on desktop might become a single column on mobile for better readability.

How to test media queries

You don’t need fancy tools to test your media queries – just these steps:

• Resize your browser: Shrink and expand your window to see if the layout adjusts properly.
• Use developer tools: Most browsers let you simulate different screen sizes and devices.
• Try it on real devices: Always check your site on an actual phone and tablet if possible.
• Use online responsive checkers: Tools like Google’s Mobile-Friendly Test or BrowserStack help preview your site on multiple devices.

FAQs about media queries

What’s the difference between media queries and breakpoints?

Breakpoints are the specific screen widths at which your design changes. Media queries are the rules that detect those widths and apply styles accordingly. So breakpoints are defined within media queries.

Are media queries still relevant with modern CSS frameworks?

Yes! Even though frameworks like Tailwind or Bootstrap include responsive utilities, they still rely on media queries under the hood. You can also write custom media queries alongside those frameworks when you need more control.

Can media queries detect device types like iPhone or Android?

Media queries don’t detect device brands, but they can respond to characteristics like screen size or resolution. You don’t need to know the exact device to create a layout that works for it.

How many media queries should I use?

There’s no set number. It depends on your design. Many developers start with 3–5 key breakpoints for mobile, tablet, and desktop, then add more as needed.

Build a responsive website with B12

With B12’s AI-powered website builder, you don’t have to worry about breakpoints or media queries. Your site will automatically look great on mobile, tablet, and desktop – from homepage to blog to contact form. Start building your responsive website today!