Q17: How do Media Queries (@media) structure mobile-first responsive architecture?
Mobile-first responsive design defines base styles for small screens first, then uses @media (min-width: ...) queries to layer on layout enhancements as viewport width increases.
Mobile-First Media Query Setup
/* Base Styles (Mobile) */
.grid {
display: block;
}
/* Tablet Breakpoint */
@media (min-width: 768px) {
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
}
/* Desktop Breakpoint */
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(4, 1fr);
}
}💡 Layout rules progressively enhance from single column to 2 and 4 columns as screens widen.
Key Takeaways
min-widthqueries build progressive enhancements from small to large viewports.- Mobile-first architectures minimize stylesheet overrides.
Knowledge Check
Which query type forms the foundation of Mobile-First responsive CSS architectures?