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; }
}
```
संबंधित टूल्स
C
CSS Minifier
C
CSS Beautifier
C
CSS Gradient Generator
C
CSS Box Shadow Generator
C
CSS Flexbox Generator
C
CSS Grid Generator
C
CSS Animation Generator
C
CSS Border Radius Generator
C
CSS Text Shadow Generator
C
CSS Transform Generator
S
Social Media Size Guide
C
CSS Unit Converter
C
CSS Color Converter
M
Media Query Generator
C
CSS Filter Effects
C
CSS Clip-Path Generator