CSS Media Queries Explained: How Websites Adapt to Different Screen Sizes

A media query is a CSS feature that applies specific styles based on conditions such as screen width, orientation, or output type. Developers use media queries to build responsive websites that adjust their layout across devices like phones, tablets, and desktops without creating separate HTML files. The basic syntax combines the @media rule, an optional media type such as screen or print, and a condition like max-width or min-width. Common media features include min-width, max-width, orientation, and even user preferences such as dark mode. While specifying a media type like screen is valid, modern responsive design often omits it, making concise queries like @media (max-width: 768px) the standard practice.