Beginner LevelCSS & Modern Layouts
How do CSS media queries enable responsive design?
❓ Interview Prompt: Explain @media rules, common breakpoints, and the mobile-first approach.
Media queries apply CSS rules conditionally based on viewport characteristics:
Syntax:
@media (condition) { /* styles */ }
Mobile-First Approach (recommended):
Write base styles for mobile, then use min-width queries to add complexity for larger screens:
•
@media (min-width: 640px) — Tablet•
@media (min-width: 1024px) — Desktop•
@media (min-width: 1280px) — Large DesktopOther Useful Queries:
•
prefers-color-scheme: dark — detect OS dark mode preference.•
prefers-reduced-motion: reduce — disable animations for accessibility.•
hover: hover — detect devices that support hover (not touch-only).Code Implementation Example
css
/* Mobile-first base styles */
.grid { display: flex; flex-direction: column; gap: 1rem; }
/* Tablet: 2 columns */
@media (min-width: 640px) {
.grid { flex-direction: row; flex-wrap: wrap; }
.grid > * { flex: 1 1 48%; }
}
/* Desktop: 3 columns */
@media (min-width: 1024px) {
.grid > * { flex: 1 1 30%; }
}
/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition-duration: 0.01ms !important; }
}💡Mobile-first responsive breakpoints and accessibility media queries.
🎯 Interview Key Takeaway
Design mobile-first with min-width breakpoints. Always respect prefers-reduced-motion for accessibility.
#Media Queries#Responsive#Mobile#Beginner
Back to all CSS & Modern Layouts Questions→