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.