Let's look at a code example
that doesn't use media queries:
This layout looks good on large screens.
When we resize the output panel to have
a smaller width, at one point we begin
to feel that the columns shrink too much.
At that point, you would like to add a
media query to change the styles:
So add this media query in the
editor given above and see what happens:
Below the screen width of 860px,
the flex-basis value of col1 is set
to 100% using the shorthand flex property.
This makes the 2nd and 3rd column shift down
together. This looks good until you reach a
much smaller screen width. Then you would like
to add another media query to make the 2nd
and
3rd column stretch full width each.
So, add this media query:
Now, we have a
fully responsive layout.
The points 860px
and
420px at which we introduced
media queries are breakpoints.
The best way to choose breakpoints
is by selecting the screen widths
where your content starts to break
in some way.