Basics of media queries

Basics of Media Queries

Media queries are a technology in CSS3 used to apply different style rules based on device characteristics (such as viewport width, screen resolution, device orientation, etc.). They enable web pages to provide optimal display effects for different devices or screen sizes and are a core tool for achieving responsive design.

Syntax Structure of Media Queries

Media queries consist of media types and media features. The basic syntax is as follows:

@media media-type and (media-feature) {
  /* Style rules */
}

Media types can be:

• all (all devices)
• print (printers)
• screen (screen devices)
• speech (speech synthesizers)

The most common usage is to omit the media type and directly use media features:

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

Common Media Features

Viewport Width-Related

/* Applied when viewport width is less than or equal to 768px */
@media (max-width: 768px) {
  .container {
    width: 100%;
  }
}

/* Applied when viewport width is greater than or equal to 992px */
@media (min-width: 992px) {
  .sidebar {
    width: 250px;
  }
}

/* Applied when viewport width is between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

Device Orientation

/* When the device is in landscape mode */
@media (orientation: landscape) {
  .header {
    height: 80px;
  }
}

/* When the device is in portrait mode */
@media (orientation: portrait) {
  .header {
    height: 120px;
  }
}

Resolution-Related

/* High-resolution devices */
@media (-webkit-min-device-pixel-ratio: 2), 
       (min-resolution: 192dpi) {
  .logo {
    background-image: url('logo@2x.png');
    background-size: contain;
  }
}

/* Standard-resolution devices */
@media (-webkit-max-device-pixel-ratio: 1.99), 
       (max-resolution: 191dpi) {
  .logo {
    background-image: url('logo.png');
  }
}

Logical Operators

Media queries support three logical operators: and, , (equivalent to "or"), and not.

/* Both conditions must be met */
@media (min-width: 768px) and (orientation: landscape) {
  .content {
    columns: 2;
  }
}

/* Either condition can be met */
@media (max-width: 600px), (orientation: portrait) {
  .nav {
    display: none;
  }
}

/* Applied when the condition is not met */
@media not all and (min-width: 1200px) {
  .container {
    max-width: 1000px;
  }
}

Practical Application Examples

Responsive Navigation Bar

/* Default styles - mobile-first */
.nav {
  display: flex;
  flex-direction: column;
}

.nav-item {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

/* Medium screens - horizontal layout */
@media (min-width: 768px) {
  .nav {
    flex-direction: row;
  }
  
  .nav-item {
    border-bottom: none;
    border-right: 1px solid #ddd;
  }
}

/* Large screens - increased spacing */
@media (min-width: 1200px) {
  .nav-item {
    padding: 15px 20px;
  }
}

Responsive Grid Layout

/* Mobile devices - single column */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* Tablets - two columns */
@media (min-width: 600px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop - three columns */
@media (min-width: 900px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

/* Large desktop - four columns */
@media (min-width: 1200px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

Using Media Queries in HTML

In addition to using media queries in CSS files, they can also be applied in the following ways:

Using the link Tag

<link rel="stylesheet" media="(max-width: 800px)" href="mobile.css">
<link rel="stylesheet" media="(min-width: 801px)" href="desktop.css">

Using the style Tag

<style>
  @media (max-width: 600px) {
    body {
      font-size: 14px;
    }
  }
</style>

Using the @import Rule

@import url("mobile.css") (max-width: 600px);
@import url("desktop.css") (min-width: 601px);

Modern Responsive Design Practices

Mobile-First Principle

/* Base styles - for mobile devices */
.container {
  padding: 10px;
  font-size: 16px;
}

/* Progressive enhancement - for larger screens */
@media (min-width: 768px) {
  .container {
    padding: 20px;
    font-size: 18px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
    font-size: 20px;
  }
}

Breakpoint Selection Strategy

Common breakpoint settings (based on mainstream device sizes):

/* Extra small devices (phones, less than 576px) - usually no media query needed, mobile-first approach */

/* Small devices (tablets, 576px and up) */
@media (min-width: 576px) { ... }

/* Medium devices (tablets in landscape/small desktops, 768px and up) */
@media (min-width: 768px) { ... }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

Responsive Images

.hero-image {
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .hero-image {
    height: 400px;
    object-fit: cover;
  }
}

/* Provide different images based on resolution */
@media 
  (-webkit-min-device-pixel-ratio: 2), 
  (min-resolution: 192dpi) {
  .hero-image {
    background-image: url('hero-image@2x.jpg');
  }
}

Common Issues and Solutions

1. Media Queries Not Working

Possible causes and solutions:

• Incorrect media query order - later rules override earlier ones
• Wrong units used - ensure valid units like px, em, etc.
• Syntax errors - check for matching brackets, colons, etc.

2. Viewport Issues on Mobile Devices

Ensure the viewport meta tag is added in HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

3. Using em Units in Media Queries

/* Media queries based on em units */
@media (min-width: 48em) { /* 768px / 16 = 48em */
  .content {
    font-size: 1.2em;
  }
}

Advanced Media Query Techniques

Detecting Touch Devices

@media (hover: none) and (pointer: coarse) {
  /* Styles for touch devices */
  .button {
    padding: 15px; /* Increase tap target size */
  }
}

@media (hover: hover) and (pointer: fine) {
  /* Styles for non-touch devices */
  .button:hover {
    background-color: #f0f0f0;
  }
}

Dark Mode Support

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #e0e0e0;
  }
  
  a {
    color: #bb86fc;
  }
}

@media (prefers-color-scheme: light) {
  body {
    background-color: #ffffff;
    color: #333333;
  }
  
  a {
    color: #6200ee;
  }
}

Reduced Motion

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

Combining Media Queries with CSS Variables

:root {
  --primary-color: #4285f4;
  --font-size: 16px;
  --spacing: 1rem;
}

@media (min-width: 768px) {
  :root {
    --font-size: 18px;
    --spacing: 1.5rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --font-size: 20px;
    --spacing: 2rem;
  }
}

.container {
  padding: var(--spacing);
  font-size: var(--font-size);
  color: var(--primary-color);
}

Performance Considerations for Media Queries

1. Organize CSS Structure: Place media queries near related rules instead of grouping them all together.
2. Avoid Overuse: Use media queries only when necessary.
3. Use min-width Instead of max-width: Follow the mobile-first principle.
4. Merge Similar Queries: Reduce duplicate code.

/* Not recommended - duplicate media queries */
@media (min-width: 768px) {
  .header { ... }
}
@media (min-width: 768px) {
  .footer { ... }
}

/* Recommended - merge media queries */
@media (min-width: 768px) {
  .header { ... }
  .footer { ... }
}

Browser Compatibility

Modern browsers have excellent support for media queries, including:

• Chrome 4+
• Firefox 3.5+
• Safari 4+
• Opera 9.5+
• Edge 12+
• IE9+

For older versions of IE (6-8), use conditional comments to provide fallbacks:

<!--[if lt IE 9]>
  <link rel="stylesheet" href="ie-fallback.css">
<![endif]-->