Media queries allow you to apply CSS styles based on device characteristics like screen size, orientation, and resolution. 1. Start with mobile-first design, applying base styles for small screens. 2. Use min-width and max-width to define breakpoints for tablets and desktops. 3. Target additional features such as orientation, resolution, aspect ratio, and dark mode preferences. 4. Maintain clean code by using consistent breakpoints, grouping related queries, and leveraging CSS variables for easier updates.

To use media queries effectively, you're essentially telling the browser: "If the screen meets these conditions, apply these styles." They’re a core part of responsive web design and let you tailor layouts for different devices or screen sizes.

What Exactly Are Media Queries?

Media queries are CSS techniques that let you apply styles based on the characteristics of the device — like screen width, height, orientation, resolution, and more. The most common use is adjusting layout based on screen size, but they can go beyond that.

A basic structure looks like this:

@media [media type] and ([media feature]) {
  /* CSS rules here */
}

For example, if you want to change the background color when the screen is narrower than 600px:

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

You can also target print styles, high-resolution screens, or even dark mode preferences.

How to Use Media Queries Based on Screen Size

Most developers start with mobile-first design, meaning base styles work on small screens, then add media queries to enhance the experience for larger ones.

Here’s how to do it step by step:

• Start with default styles for mobile.
• Add @media blocks that target wider screens as needed.
• Use min-width and max-width to define breakpoints.

Common breakpoints include:

• Mobile: up to 767px
• Tablet: 768px – 1023px
• Desktop: 1024px and above

Example:

/* Default mobile styles */
body {
  font-size: 16px;
}

/* Tablet styles */
@media screen and (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

/* Desktop styles */
@media screen and (min-width: 1024px) {
  body {
    font-size: 20px;
  }
}

This way, your site adapts smoothly as the screen gets bigger.

Other Useful Device Features You Can Target

Besides screen width, there are other features worth checking:

• Orientation: Portrait vs landscape

  @media screen and (orientation: portrait) { ... }

• Resolution: High-DPI screens (like Retina displays)

  @media screen and (min-resolution: 2dppx) { ... }

• Aspect ratio: Useful for video players or full-screen apps

  @media screen and (aspect-ratio: 16/9) { ... }

• Dark mode preference:

  @media (prefers-color-scheme: dark) { ... }

  These help you fine-tune the user experience without relying on JavaScript.

  ---

  Tips for Writing Clean and Maintainable Media Queries

  It's easy to get carried away with too many queries, so keep things organized:

  • Stick to a few consistent breakpoints across your project.
  • Keep related media queries together in your CSS file, or group them at the end.
  • Avoid using max-width unless necessary — min-width makes stacking easier.
  • Consider using CSS variables for your breakpoints to make changes easier later.

  Also, test your site on real devices or good emulators to make sure your styles kick in where they should.

  ---

  That’s basically how media queries work. They’re not complicated once you understand how to set conditions and layer styles accordingly.

  The above is the detailed content of How do I use media queries to apply different styles based on the screen size or device characteristics?. For more information, please follow other related articles on the PHP Chinese website!