Answer
Media queries conditionally apply styles based on the output device or environment. • They can test features such as width, orientation, color scheme, and motion preference. • Modern range syntax can express boundaries clearly. • Queries should enhance a flexible base layout rather than target named devices.
💡 Simple Example
@media (width >= 48rem) {
.layout { grid-template-columns: 16rem 1fr; }
}
⚡ Quick Revision
Media queries apply CSS only when environment conditions match.