Preview
Video Player
00:00
00:00
Complex Media Queries
4:00Looking one more time at CSS Tricks’s diagram called anatomy of a media query, you might notice that we skipped one portion of the diagram. CSS Media Queries accept logical operators that allow you to combine multiple characteristics into one query. For example, what if we wanted to set a minimum and maximum viewport width for applying a CSS rule?
Looking one more time at CSS Tricks'
diagram called "Anatomy of a Media Query,"
0:01
you might notice that we skipped
one portion of the diagram.
0:08
CSS media queries accept logical
operators that allow you to
0:13
combine multiple
characteristics into one query.
0:17
For example,
what if we wanted to set a minimum and
0:23
maximum viewport width for
applying a CSS rule?
0:27
You might want an element
0:32
to be styled a certain way
0:38
only when the viewport
0:44
is between 600 and
0:49
800 pixels for example.
0:54
We can add as many conditions as we
want separated by the and operator.
1:13
In this case,
we're turning our header text yellow.
1:20
But only when the screen is at least 600
pixels wide, but no wider than 800 pixels.
1:23
The logical operator called or
is used less frequently.
1:33
In this case, the CSS rule will be applied
when either of the two conditions are met.
1:38
And you'll notice we don't
literally type the word or
1:45
we just separate our desired
media features using commas.
1:49
Let's create a media query for
device screens
1:55
that changes the background color of
our sections under two conditions.
2:01
Either, the viewpoint width
is at least 900 pixels,
2:06
Or when the screen is in
portrait orientation.
2:14
Now when my viewport is
wider than 900 pixels,
2:28
the background of my sections is
2:35
cornsilk no matter what, but
2:40
on a narrower viewport it depends.
2:44
If the height of the viewport
is taller than the width,
2:51
that's portrait orientation,
so we see cornsilk.
2:55
If the width of the viewport is wider than
the height, that's landscape orientation.
2:59
So we see azure.
3:06
Great job making it this far.
3:08
The tools you've learned here will
allow you to exercise much more control
3:12
over your CSS layout.
3:17
And not just on the desktop.
3:19
You've been introduced
to CSS media queries.
3:21
And you can use that knowledge to
target devices by type, screen width,
3:24
and even orientation.
3:29
As you practice what we've learned here,
keep the notes and
3:32
resources we've covered handy.
3:35
Mastering CSS layout involves learning
a lot of properties and values.
3:38
But the one thing you needn't
worry about is memorizing it all.
3:44
Keep on coding and
experimenting, but also reading.
3:49
Resources like the MDN docs and
CSS tricks are here to help.
3:53