85. Media Query Logic: AND, OR, and NOT

Media queries can be combined using logical operators to target highly specific device characteristics.

1. The and Operator

Use and to combine multiple conditions. All conditions must be true for the styles to apply.

css /* Styles apply ONLY when the viewport is between 768px and 1200px wide */ @media (min-width: 768px) and (max-width: 1200px) { .mid-range-ad { display: block; } }

2. The Comma (OR Operator)

Using a comma lets you apply the same styles if any of the conditions are true.

css /* Styles apply IF the screen is smaller than 600px OR IF the device is a printer / @media (max-width: 600px), print { .nav-menu { display: none; / Hide navigation on small screens and when printing */ } }

3. The not Operator

Use not to negate the query, applying styles when the condition is false.

css /* Styles apply to everything EXCEPT print media / @media not print and (min-width: 800px) { / ... */ }

Tip: When working with modern tools, consider using a variable naming convention for your breakpoints (e.g., --breakpoint-md: 768px;) to keep your numbers consistent across your entire stylesheet.