Media Query
CSS Media Query
A conditional rule applying styles only when the device matches specified criteria (width, orientation, etc.).
기술 세부사항
Media Querys test viewport and device characteristics to conditionally apply styles. Level 4 features include range syntax (width >= 768px), prefers-color-scheme (dark mode), prefers-reduced-motion (accessibility), and hover capability detection. The mobile-first approach writes base styles for small screens and uses min-width queries for larger breakpoints. Container queries (@container) complement media queries by responding to parent element size rather than viewport size.
예시
```css
/* Mobile-first: base styles for small screens */
.container { padding: 1rem; }
@media (min-width: 768px) {
.container { padding: 2rem; max-width: 720px; }
}
@media (min-width: 1024px) {
.container { max-width: 960px; }
}
```