Media queries
The meta viewport tag, @media with min-width and max-width, breakpoints, the mobile-first approach, orientation queries and preference queries (dark theme, reduced motion).
- 22 cards
- 6 topics
- Free
The outline, topic by topic
Each topic is weighted the way the exam weighs it.
- Concepts
- Questions
- Sort and link
- The numbers
- Scenarios
- Understand
A few cards from the deck
Viewport: what is it?
Show the answer
The part of the window where the page is displayed. On mobile, a meta tag of the same name tells the browser to use the real screen width rather than a simulated desktop width.
Without
<meta name="viewport" content="width=device-width, initial-scale=1">, a phone shows the page zoomed out, and media queries see a window of about 980 px.Which rules apply on an 800 px wide screen?
```css
.menu { display: block; }
@media (min-width: 600px) { .menu { display: flex; } }
@media (min-width: 1000px) { .menu { gap: 24px; } }`- The base rule and the 600 px one
- Only the base rule
- All three rules
- The 600 px and 1000 px ones, without the base rule
Show the answer
The base rule and the 600 px one
The base rule has no condition. min-width: 600px is true from 600 px up, so at 800 px; min-width: 1000px is not yet.
@media (min-width: 600px)applies when the viewport width is … 600 px.Show the answer
@media (min-width: 600px)applies when the viewport width is greater than or equal to 600 px.The bound is inclusive, like that of
max-width: 600px: at exactly 600 px, both queries apply at the same time. Hence the 599 px and 600 px pairs to separate two ranges.Media query: what is it?
Show the answer
A condition set on a block of CSS rules, which only applies it if the screen or the person's preferences satisfy it: width, orientation, dark theme.
It does not change specificity: the rules it contains are ranked like any others, by specificity then by order of writing.