Preview
Video Player
00:00
00:00
What are Media Queries?
6:37A CSS media query detects information about the way your web page is being viewed. The CSS rules written within your media query will only be applied if certain conditions are met.
[MUSIC]
0:00
You've come a long way in this course.
0:05
You've learned the parts
of the CSS box model and
0:07
worked to control layout and
positioning of your content.
0:10
One thing we haven't looked at yet,
however,
0:15
is the variety of ways that
web content can be viewed.
0:19
As users, we look at websites and
applications every day on
0:23
a variety of screens, from laptops,
to tablets to phones.
0:28
How do developers keep their
web content legible in
0:33
such a broad variety of
viewing environments?
0:38
The answer is complicated and some of it
goes beyond the scope of this course.
0:42
But in this video, you'll learn one
very important step in optimizing
0:48
your content for different platforms,
writing CSS media queries.
0:53
A CSS Media Query detects
information about
0:58
the way your web page is being viewed.
1:04
The CSS rules written within
your media query will only be
1:08
applied if certain conditions are met.
1:13
Think of all the different
ways you can view a webpage.
1:17
You might use a desktop computer,
a laptop, a tablet, or a phone.
1:20
If your device is mobile,
you might hold it in either portrait or
1:26
landscape orientation,
your screen might be low resolution.
1:32
But, newer devices often have
high resolution screens,
1:37
with extra pixels per square inch. Or,
you might not use the screen at all.
1:42
If you're reading a long article,
1:47
perhaps you'll decide to
print the web page instead.
1:50
CSS media queries allow
developers to customize colors,
1:53
fonts, images, layouts,
and more depending on
1:59
the characteristics of the device
being used to view the page.
2:04
You might think of the styles you've
written so far as the base styles for
2:11
your webpage, these styles haven't
been written inside a media query.
2:16
So they'll apply to every
device that views your site.
2:21
CSS media queries target more
specific viewing scenarios.
2:25
I mentioned that CSS media
queries can be used to
2:29
control what your page
looks like when printed.
2:34
We haven't looked yet at how developer
Diane's blog post looks for print.
2:39
So let's check that out,
I'm pressing command p in my browser and
2:43
scrolling through the print preview.
2:48
Other than the fact that background
colors don't work on the printed
2:54
page to keep printers from wasting ink,
2:59
I don't see anything terribly
surprising in my printer preview.
3:02
I am noticing a chance to
save a bit of paper, however.
3:07
When we were learning about
viewport units, we set our section
3:14
elements to be at least 100%
of the height of the viewport.
3:19
Which is an interesting
effect on the screen, but
3:24
not really beneficial on the printed page.
3:27
Let's see if we can override this
effect when the page is printed.
3:29
A media query begins with an @
symbol followed by the word media,
3:35
notice that there's no space in there.
3:42
And the name of the media type and
then curly braces.
3:46
You'll notice that I'm writing this
at the bottom of my style sheet,
3:53
which is where developers most
often keep their media queries.
3:58
Within our media query curly braces,
4:03
we can write CSS rules that apply
only to the given conditions.
4:06
In this case,
only when the page is being printed.
4:10
But auto value means let the browser
determine the minimum height for
4:20
the selected element.
4:24
Let's try the print preview again and
4:28
now our section elements are only
as tall as they need to be.
4:31
I noticed a couple of issues
when previewing just now.
4:40
One, is that the z-index seems
a little off on the figure
4:43
element containing developer
Diane's photo, and
4:48
it's covering our fixed header.
4:53
This is a good opportunity
to practice z-index a bit.
4:56
We'll assign the figure
element a z-index of 1,
5:00
the header gets a z-index of 2.
5:07
And the interesting banner should be
on top and receive a z-index of 3.
5:11
And that fixes our stacking issue.
5:22
You'll notice that the interesting
banner becomes unstuck
5:23
once we scroll down to
the end of the article,
5:28
which has to do with some of
the limits of position: sticky.
5:32
I'm fine with how it is, but
5:37
I've included an article in the teachers
notes if you'd like to read more
5:39
about how position: sticky relates
to the height of the parent element.
5:44
I am concerned that the CSS
wizard banner looks a little
5:49
strange on the printed page.
5:54
So maybe we'll also use our print
media query to hide the banner.
5:56
Feel free to continue making
changes to our print stylesheet by
6:21
writing new rules within our media query.
6:25
In the next video,
we'll learn to target media features
6:28
to make our media queries
even more powerful.
6:32