FrontendBeginner
Media Query
PronunciationMEE-dee-uh KWEER-ee
Definition
A CSS technique used to apply different styles based on device characteristics like screen width, height, or resolution.
Where you hear it
In frontend development meetings, CSS styling sessions, and responsive design reviews.
Examples
We use a media query to change the navigation menu layout on mobile screens.
This media query detects if the user has enabled dark mode in their system preferences.
Common mistake
Thinking media queries can only check screen width, when they can also target device orientation, pixel density, and input types like touch versus mouse.