HTML & CSS
/Intermediate
Media Queries
Definition
A CSS technique introduced in CSS3 that allows content rendering to adapt to different conditions such as screen resolution, device width, or orientation.
Explain Like I'm New
An 'IF statement' for CSS. You can tell the browser: 'If the screen is smaller than 600px (like an iPhone), change the background to Red and make the font smaller. Otherwise, leave it alone.'
Real World Example
Turning a 3-column desktop layout into a single-column layout on mobile devices so the user doesn't have to horizontally scroll.
Common Use Cases
- •Mobile responsive design
- •Dark mode detection
- •Print styling (hiding navbars when printing a page)
Interactive Example
Interview Questions
basic
- What symbol starts a media query?
intermediate
- What does `@media (max-width: 768px)` mean?