Media Queries Advanced Techniques Multi-Condition Logic

Introduction

Media queries are a cornerstone of responsive design, enabling developers to apply CSS rules conditionally based on device characteristics such as screen size, orientation, or resolution. While basic media queries allow for simple breakpoints, advanced techniques involve combining multiple conditions to create sophisticated, context-aware layouts. This section explores multi-condition logic, including nested queries, logical operators, and complex selector combinations, to build highly flexible and adaptive designs.

Multi-Condition Logic Basics

Multi-condition logic involves evaluating multiple media queries or CSS rules simultaneously. For example, a rule might apply if both screen width is greater than 768px and the device is a mobile phone. This requires careful structuring to ensure the correct conditions are evaluated in the right order.

Nested Media Queries

Nested media queries allow for layered conditional logic. For instance:

@media (min-width: 1024px) and (min-device-width: 480px) {  
  /* Styles for desktop and mobile devices with screen widths ≥ 1024px and ≥ 480px */  
}

This ensures that rules are applied only when both conditions are met, avoiding unnecessary rendering.

Logical Operators

CSS supports logical operators (and, or, not) to refine conditions. For example:

@media (min-width: 768px) or (max-width: 1024px) {  
  /* Styles for screens with widths ≥ 768px or ≤ 1024px */  
}

This allows for flexible layouts, such as dual-column designs or adaptive grids.

Advanced Techniques

Combining Multiple Conditions

Advanced techniques involve combining multiple media queries or selectors. For example:

@media (min-width: 1200px) and (min-device-width: 800px) {  
  .container {  
    width: 100%;  
    padding: 20px;  
  }  
}

This ensures that a specific style is applied only when both conditions are satisfied, optimizing performance and reducing unnecessary rendering.

Complex Selector Combinations

Complex selectors can combine multiple conditions using and, or, and not. For instance:

@media (min-width: 600px) and (min-device-width: 320px) or (max-width: 800px) {  
  .hero {  
    background-image: url('hero.jpg');  
  }  
}

This allows for dynamic layouts that adapt to diverse device configurations.

Order of Evaluation

The order of media queries matters. A rule that evaluates later may override earlier ones if the conditions are met. For example:

@media (min-width: 1024px) {  
  .header {  
    background-color: #333;  
  }  
}  
@media (max-width: 768px) {  
  .header {  
    background-color: #666;  
  }  
}

Here, the min-width: 1024px rule takes precedence over the max-width: 768px rule, ensuring the correct background color is applied.

Practical Examples

Scenario 1: Dual-Column Layout

A layout that switches between two columns based on screen width:

@media (min-width: 768px) {  
  .container {  
    display: grid;  
    grid-template-columns: 1fr 2fr;  
  }  
}  
@media (max-width: 767px) {  
  .container {  
    display: flex;  
    flex-wrap: wrap;  
  }  
}

This ensures that the layout adapts to both desktop and mobile devices.

Scenario 2: Conditional Background Images

A background image that changes based on screen resolution:

@media (min-width: 1200px) {  
  .background {  
    background-image: url('large-image.jpg');  
  }  
}  
@media (max-width: 900px) {  
  .background {  
    background-image: url('small-image.jpg');  
  }  
}

This allows for optimized image delivery across different device sizes.

Media Queries Advanced Techniques Multi-Condition Logic