Media Queries
Media queries apply styles based on environmental conditions such as viewport width, orientation, resolution, color scheme, reduced motion preference, and input capabilities.
Modern responsive design often uses content-driven breakpoints instead of copying popular device widths.
Media Query Decision
Responsive Media Query
.navigation {
display: flex;
}
@media (max-width: 700px) {
.navigation {
flex-direction: column;
}
}💡 The layout changes when the available viewport width becomes constrained.
Key Takeaways
- Choose breakpoints based on content needs.
- Media queries can test many environmental features beyond width.
Knowledge Check
What does a media query allow CSS to do?