Intermediate LevelCSS & Modern Layouts
What is the CSS media query range syntax introduced in modern browsers?
❓ Interview Prompt: Explain the new range syntax (@media (width >= 768px)) vs traditional @media (min-width: 768px).
Modern CSS introduces mathematical range syntax for media queries, replacing the older min-/max- prefixed approach:
Traditional (still valid):
@media (min-width: 768px) and (max-width: 1024px)
Modern Range Syntax:
@media (768px <= width <= 1024px)
Benefits:
•
More readable and mathematically intuitive.
•
Supports
<, >, <=, >= operators.•
Avoids the off-by-one confusion between min/max values.
•
Works with
width, height, aspect-ratio, and other range features.Code Implementation Example
css
/* ❌ Old syntax */
@media (min-width: 768px) and (max-width: 1023px) { /* tablet */ }
/* ✅ New range syntax (clearer) */
@media (768px <= width < 1024px) { /* tablet */ }
@media (width >= 1024px) { /* desktop */ }
@media (width < 640px) { /* mobile */ }💡Modern range syntax vs traditional min/max media queries.
🎯 Interview Key Takeaway
Use the range syntax (@media (width >= 768px)) for clearer, more readable responsive breakpoints.
#Media Queries#Range Syntax#Modern#Intermediate
Back to all CSS & Modern Layouts Questions→