Advanced usage of media queries

Review of Media Query Basics

Media queries are a CSS3 technology used to apply different styles based on device characteristics. The most basic syntax for a media query is as follows:

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

This example means that when the viewport width is less than or equal to 600px, the background color will change to light blue. Media queries consist of media types and media features, and multiple conditions can be combined.

Using Logical Operators

Media queries support logical operators like and, not, and only to build more complex query conditions.

Combining Multiple Conditions

@media (min-width: 400px) and (max-width: 800px) {
  .container {
    width: 90%;
  }
}

This query applies styles when the viewport width is between 400px and 800px.

Excluding Specific Conditions

@media not (orientation: portrait) {
  .sidebar {
    display: none;
  }
}

This query hides the sidebar when the device is not in portrait orientation.

Queries Based on Device Features

Besides viewport width, media queries can also be based on various device characteristics.

Resolution Queries

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

This query provides higher-resolution images for high-DPI screens.

Aspect Ratio Queries

@media (aspect-ratio: 16/9) {
  .video-container {
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
  }
}

Nested Media Queries

CSS preprocessors like Sass allow nesting media queries, making the code easier to maintain.

.container {
  width: 100%;
  
  @media (min-width: 768px) {
    width: 750px;
  }
  
  @media (min-width: 992px) {
    width: 970px;
  }
}

After compilation, independent media query blocks are generated.

Media Queries in JavaScript

You can use window.matchMedia() in JavaScript to detect media queries.

const mediaQuery = window.matchMedia('(min-width: 768px)');

function handleTabletChange(e) {
  if (e.matches) {
    console.log('Screen width is at least 768px');
  } else {
    console.log('Screen width is less than 768px');
  }
}

mediaQuery.addListener(handleTabletChange);
handleTabletChange(mediaQuery);

Combining Media Queries with CSS Variables

CSS variables can be combined with media queries to create dynamic themes.

:root {
  --primary-color: blue;
  --font-size: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: lightblue;
  }
}

body {
  color: var(--primary-color);
  font-size: var(--font-size);
}

Print Style Optimization

Media queries can optimize styles specifically for printing devices.

@media print {
  .no-print {
    display: none;
  }
  
  body {
    font-size: 12pt;
    color: black;
    background: white;
  }
}

Viewport Units and Media Queries

Viewport units (vw, vh) can be combined with media queries to create responsive layouts.

.container {
  width: 100vw;
  height: 100vh;
}

@media (orientation: landscape) {
  .container {
    width: 70vw;
    margin: 0 auto;
  }
}

Media Query Performance Optimization

Improper use of media queries can impact performance. Here are some optimization tips:

1. Place media queries at the bottom of the stylesheet.
2. Avoid unnecessary complex queries.
3. Use em instead of px for breakpoint units.

/* Not recommended */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  /* Styles */
}

/* Recommended */
@media (min-width: 48em) {
  /* Styles */
}

Modern Layout Techniques and Media Queries

Combining Flexbox and Grid layouts with media queries can create more flexible responsive designs.

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .grid-container {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

Media Queries and Animation Performance

Control animation performance on different devices.

.box {
  transition: transform 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .box {
    transition: none;
  }
}

Future Developments in Media Queries

CSS4 is proposing more media query features, such as:

@media (scripting: enabled) {
  /* Styles when JavaScript is available */
}

@media (hover: hover) {
  /* Styles for devices that support hover */
}