Media queries enable responsive designs that adapt to different devices and conditions. Here's a comprehensive guide.
Basic Syntax
Loading code block...
Common Breakpoints
Loading code block...
Media Types
Loading code block...
Logical Operators
Loading code block...
Feature Queries
Loading code block...
User Preferences
Loading code block...
Hover and Pointer
Loading code block...
Display Features
Loading code block...
Container Queries
Loading code block...
Responsive Typography
Loading code block...
Responsive Images
Loading code block...
Navigation Pattern
Loading code block...
Grid Responsive Pattern
Loading code block...
Best Practices
Strategy:
✓ Mobile-first approach
✓ Use min-width queries
✓ Set logical breakpoints
✓ Test on real devices
Performance:
✓ Minimize media queries
✓ Use container queries for components
✓ Combine related styles
✓ Consider critical CSS
Accessibility:
✓ Respect prefers-reduced-motion
✓ Support prefers-color-scheme
✓ Test with prefers-contrast
✓ Ensure touch targets
Avoid:
✗ Device-specific breakpoints
✗ Too many breakpoints
✗ Hiding content on mobile
✗ Fixed pixel values only
Conclusion
Media queries are essential for responsive design. Use min-width for mobile-first approaches, leverage user preference queries for accessibility, and consider container queries for component-level responsiveness. Always test across devices and respect user preferences for motion, color scheme, and contrast.