A media query is a CSS technique used to apply different styles depending on the user’s device or screen size. It’s one of the key tools behind responsive design, allowing your website to adjust its layout and appearance depending on whether it’s viewed on a phone, tablet, or desktop. Media queries evaluate characteristics like width, height, resolution, or orientation. With this flexibility, designers can create experiences that feel seamless across different devices without building multiple separate websites.

Media queries are written in your stylesheet and act like rules that activate when certain conditions are met. For example, a layout might change from a three-column desktop view to a single-column mobile view once the screen width drops below a certain threshold. This keeps your content readable and your design looking intentional no matter the device.

Why media queries are essential for responsive design

Responsive design depends heavily on media queries to function properly. Without them, layouts would stay fixed, forcing users to pinch and zoom or scroll horizontally on smaller screens. That’s a frustrating experience, and often causes visitors to leave the site.

By using media queries, designers can make specific layout changes that only take effect at defined breakpoints, like when a screen is under 768px wide. These changes might include resizing images, hiding navigation menus, or rearranging content blocks. Media queries give you precise control over how your website adapts to various environments, making your site more user-friendly and improving accessibility.

How media queries work in CSS

Media queries follow a simple logic: If the screen meets certain conditions, then apply these styles. They typically start with the @media rule, followed by the conditions (also called media features), and then the styles to apply. Here’s a basic example:

css

CopyEdit

@media (max-width: 768px) {

  body {

    background-color: lightblue;

  }

}

In this case, any device with a screen width of 768 pixels or less will see a light blue background. You can also combine multiple features in one query—for example, screen width and orientation. Media queries can be written inline in your CSS or in external stylesheets and are supported by all modern browsers.

Best practices when using media queries

To get the most out of media queries, it’s helpful to use a mobile-first approach. This means designing for the smallest screens first and adding styles for larger screens as needed. It leads to faster loading times and more efficient design, especially on mobile devices. You’ll also want to keep breakpoints consistent and meaningful—don’t go overboard with too many, or your code could become hard to manage.

Test your website on actual devices, not just browser tools, since real-world screen sizes and behavior may vary. Use media queries to hide unnecessary elements, adjust font sizes, or reorganize layout sections in a way that enhances the experience rather than just cramming everything in.

How media queries affect SEO and user experience

Media queries directly impact how people experience your site, especially on mobile devices—which search engines like Google care about a lot. A responsive website built with proper media queries tends to rank better in SEO results, as mobile-friendliness is a known ranking factor.

If users can access and navigate your site easily, they're more likely to stay longer, engage with content, and convert. On the flip side, if media queries are missing or misconfigured, your layout might break on certain screens, damaging both usability and credibility. Clean, responsive design backed by media queries creates a smoother, more professional user experience.

FAQs about media query

What’s the difference between a media query and responsive design?

Responsive design is the overall approach to making websites look good on any device. Media queries are one of the main tools used to accomplish that. While responsive design includes layout, typography, and imagery strategies, media queries are the CSS rules that make those changes happen at the right times.

Can I use media queries with JavaScript?

Yes, JavaScript can detect screen size and other media features using the window.matchMedia() method. However, for styling purposes, it’s generally better to keep layout decisions in CSS with media queries. JavaScript should only be used for behavior, not appearance.

Are there tools to help me write media queries more easily?

Many website builders and frameworks like Bootstrap include pre-built media query breakpoints. CSS preprocessors like Sass also let you simplify media queries with mixins. These tools reduce the complexity of writing multiple breakpoints manually and keep your code cleaner.

How many breakpoints should I use in my CSS?

There’s no one-size-fits-all number, but most designers start with 2–4 breakpoints: typically one for tablets, one for phones, and one for large desktops. Too many breakpoints can overcomplicate things, while too few can make the layout feel awkward on some screens.

Do media queries work in all browsers?

Yes, all major modern browsers support media queries. However, very old browsers (like Internet Explorer 8 and below) may have issues. For those rare cases, developers sometimes use JavaScript polyfills or fallback styles.

Build a better web presence without the hassle

Media queries are a powerful tool, but using them well requires thoughtful design and testing. If you're looking for an easier way to create a responsive site that just works, try using the B12 AI website builder. It’s built with small business owners in mind, so you can launch a website that adapts to any screen and performs well in SEO—without needing to write CSS. Get started today and see how smooth web design can be.