Media queries in CSS allow responsive design by applying styles based on device characteristics. 1. Start with mobile-first approach, writing base styles for small screens and enhancing them for larger devices. 2. Use common breakpoints logically (e.g., mobile: up to 767px, tablet: 768px–991px, desktop: 992px ), only adding queries when layout breaks. 3. Handle orientation and resolution changes when needed, like adjusting for landscape mode or retina displays. 4. Avoid pitfalls such as scattered media queries, overuse of max-width, and missing viewport meta tag. Grouping queries by breakpoint improves maintainability and clarity.

When it comes to building responsive websites, media queries are one of the most essential tools in CSS. They let you apply styles based on the characteristics of the device — mainly screen width, but also things like orientation or resolution. Used correctly, they help create layouts that adapt smoothly across phones, tablets, and desktops.

Start with a mobile-first approach

Mobile-first means writing your base CSS for smaller screens and then using media queries to enhance the layout for larger devices. This keeps your code lean and ensures better performance on mobile devices.

Here’s how this typically works:

• Write default styles that work well on phones.
• Add media queries that kick in as the screen gets wider.
• Only load heavier assets (like background images) when needed.

For example:

/* Base styles for mobile */
.container {
  padding: 10px;
}

/* Adjust layout for tablets and up */
@media (min-width: 768px) {
  .container {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
  }
}

This way, mobile users don’t have to download or process unnecessary styles meant for bigger screens.

Use common breakpoints wisely

There's no official list of breakpoints, but there are some widely used sizes that match common device widths. The key is not to target specific devices, but rather to find logical points where the layout starts to break and adjust accordingly.

Common breakpoint ranges:

• Mobile: up to 767px
• Tablet portrait: 768px – 991px
• Desktop: 992px and up

Avoid writing too many media queries for every little change. Instead, test your layout as you resize the browser and only add a query when something really needs fixing.

Also, keep related styles together inside each media query to make your code easier to maintain.

Handle orientation and resolution changes

While width-based media queries are the most common, sometimes you need to check for other features like screen orientation or pixel density.

For example, if you want to tweak styles specifically for landscape mode:

@media (orientation: landscape) {
  .hero {
    height: 30vh;
  }
}

Or serve high-resolution images to retina displays:

@media (min-resolution: 2dppx) {
  .logo {
    background-image: url('logo@2x.png');
  }
}

These aren’t always necessary, but they can be useful for fine-tuning the experience in certain cases.

Avoid common pitfalls

A few mistakes tend to pop up when people first start using media queries:

• Placing media queries all over the place instead of grouping them by breakpoint
• Using max-width only and ending up with messy overrides
• Forgetting to set the viewport meta tag in HTML (<meta name="viewport" content="width=device-width, initial-scale=1">)
• Not testing real-world resizing scenarios

One tip: consider keeping all your media queries at the bottom of your stylesheet grouped by breakpoint, especially when starting out. It makes it easier to see what styles apply where.

Basically, media queries give you control over how your site looks on different devices without needing JavaScript. Keep them simple, logical, and focused on actual layout needs.

The above is the detailed content of Effective use of CSS media queries for responsiveness. For more information, please follow other related articles on the PHP Chinese website!