What is mediaqueries?

Media queries are a feature of CSS that let you apply different styles to a webpage depending on characteristics of the device displaying it, such as screen width, height, orientation, resolution, or even light/dark mode. In simple terms, they let the same HTML look good on a phone, tablet, laptop, or TV by changing the CSS rules based on the environment.

Let's break it down

  • @media - the keyword that starts a media query block.
  • Media type - optional, tells what kind of device you’re targeting (e.g., screen, print, speech).
  • Media features - conditions inside parentheses, like (max-width: 600px) or (orientation: portrait).
  • Logical operators - you can combine conditions with and, or, not to create complex rules.
  • CSS rules - the styles placed inside the curly braces are applied only when the conditions are true. Example: @media screen and (max-width: 600px) { body { font-size: 14px; } }

Why does it matter?

  • Responsive design - makes sites adapt to any screen size, preventing horizontal scrolling or tiny text.
  • Better user experience - visitors get a layout that feels natural on their device, increasing engagement.
  • SEO benefits - search engines favor mobile‑friendly sites, which often rely on media queries.
  • Cost‑effective - one codebase serves many devices, reducing the need for separate mobile sites.

Where is it used?

  • Everyday websites and web applications to create fluid layouts.
  • CSS frameworks like Bootstrap, Tailwind, and Foundation embed media queries for their grid systems.
  • Progressive Web Apps (PWAs) that need to look good on both desktop and mobile.
  • Email templates (with limited support) to adjust for mobile email clients.
  • Print stylesheets that change layout when a page is printed.

Good things about it

  • Native CSS support - works in all modern browsers without extra libraries.
  • No JavaScript required - reduces load time and complexity.
  • Granular control - you can target very specific device features.
  • Improves performance - only the needed styles are applied, avoiding unnecessary CSS.
  • Future‑proof - new media features (like prefers‑color‑scheme) can be added as browsers evolve.

Not-so-good things

  • Can become messy - many breakpoints lead to long, hard‑to‑read CSS files.
  • Maintenance overhead - updating a design may require adjusting multiple query blocks.
  • Limited to visual changes - structural HTML changes still need JavaScript or server‑side logic.
  • Specificity issues - rules inside media queries can clash with other selectors, causing unexpected results.
  • Older browsers - very old browsers (e.g., IE8) have limited or no support for advanced media features.