CSS Media Queries: Best Practices
Media queries are the backbone of responsive design. Here's how to use them effectively.
Common Conditions
- min-width: Apply when viewport is at least this wide (mobile-first)
- max-width: Apply when viewport is at most this wide (desktop-first)
- min-height: Apply when viewport is at least this tall
- orientation: portrait or landscape mode
- print: Print stylesheets
Best Practices
1. Use Mobile-First Approach: Start with mobile styles, then add media queries for larger screens.
2. Organize by Breakpoints: Group all styles for a breakpoint together, don't scatter them throughout your CSS.
3. Use Semantic Names: Use meaningful breakpoint values that make sense in context.
4. Keep Specificity Low: Avoid nested media queries and overly specific selectors inside media queries.
5. Test Responsiveness: Always test your media queries on actual devices, not just browser dev tools.
6. Consider Touch Devices: Use hover media query to handle touch-enabled devices differently.
7. Use Print Media: Add print styles to make your pages print-friendly.
Complex Media Queries
You can combine multiple conditions with 'and' operator. Example: @media (min-width: 768px) and (max-width: 1024px) targets tablets. You can also use comma to create or conditions: @media (max-width: 480px), (orientation: landscape) applies styles to either mobile or landscape orientation.
Performance Tips
- Minimize the number of breakpoints
- Mobile-first CSS typically results in smaller files
- Use CSS variables for breakpoint values
- Avoid unnecessary nesting of media queries