Master programming syntax, solve interactive challenges & run live code in Syntaxis Explore Arena →
menu_book Course Curriculum (Responsive Web Design) expand_more
Responsive Foundations
Viewport meta tag Mobile-first CSS Fluid widths Max-width containers Relative units Box sizing Intrinsic sizing Content-driven breakpoints
Media Queries
Min-width queries Max-width queries Range syntax Orientation query Hover capability Pointer capability Reduced motion Color scheme
Flexible Layout
Flex wrapping Responsive flex direction CSS Grid auto-fit CSS Grid minmax Auto placement Gap scaling Subgrid concept Ordering caveats
Responsive Media
Responsive images srcset width descriptors sizes attribute Picture art direction Object fit Aspect ratio Video responsiveness Lazy loading
Container Queries
Container type Container name Container width query Container style query concept Container query units Nested components Fallback strategy Component breakpoint design
Production Accessibility
Fluid typography Clamp Logical properties Touch target sizing Responsive navigation Table overflow Print styles Testing viewport matrix
Responsive Web Design / Media Queries

Range syntax

Learn Range syntax in Responsive Web Design with a dedicated explanation, a concept-specific example, a production caution, and a mastery check.

12 min read • Beginner
responsive-web-design-011.css
css 
@media (30rem <= width < 60rem){.grid{grid-template-columns:repeat(2,1fr)}}
What to watch
Content source & attribution
Original Syntaxis Content · Original Syntaxis Content

Lesson quizzes

Range syntax Mastery Check →
← PREVIOUS
Max-width queries
NEXT →
Orientation query