What a media query is
A media query is a feature of CSS, the language that styles web pages, that lets a website apply different styling depending on the characteristics of the device viewing it, most commonly the screen size. It is essentially a conditional rule that says, if the screen meets certain conditions, use these styles. Media queries are the key tool that lets a single website adapt gracefully to phones, tablets, laptops, and large monitors alike.
The problem it solves
People view websites on an enormous range of screens, from small phones to wide desktop displays. A layout that looks great on a large screen may be cramped and unusable on a phone, and vice versa. Media queries solve this by allowing a page to change its appearance based on the device, so the same website can present an appropriate layout for whatever screen is actually being used.
How it works
A media query sets a condition, such as a maximum or minimum screen width, and groups together styles that should apply only when that condition is met. For example, a page might stack its content into a single column on narrow screens but arrange it into several columns on wide ones. As the screen size changes, the browser checks these conditions and applies the matching styles automatically.
The heart of responsive design
Media queries are the foundation of responsive web design, the practice of building sites that adapt fluidly to any screen. By defining breakpoints, the screen sizes at which the layout should change, developers craft a single site that reshapes itself for each device. This replaced the old, impractical approach of building separate websites for desktop and mobile, letting one flexible design serve everyone.
Beyond screen size
Although screen width is the most common use, media queries can respond to other things too. They can detect the screen orientation, whether a device is in portrait or landscape, adapt to high-resolution displays, or even respond to user preferences like a preference for dark mode or reduced motion. This flexibility lets websites tailor themselves not just to screen size but to how and where they are being viewed.
The bottom line
A media query is a CSS feature that applies different styles based on the device viewing a page, most often its screen size, letting one website adapt to phones, tablets, and desktops alike. As the foundation of responsive design, it reshapes layouts to fit any screen and can even respond to orientation and user preferences. Understanding it explains how modern sites look right on every device.
Related on Skillo
See also: What is CSS? Explained, What is responsive web design? Explained.
Sources
Published date reflects the original event date (2026-10-23). This article is original Skillo editorial written from the sources above; facts were verified in September 2026.
Leave a Reply