Preview
Video Player
00:00
00:00
Targeting Media Features
6:03In our last video, we used CSS media queries to optimize our layout for the printed page. While that’s useful, and a fun exercise, I would imagine you’re anxious to design for different screen sizes. After all, few things are more exciting for a front end web developer than launching a site that looks equally great on a small and large screen. To target different characteristics of the screen viewing our web page, we need more than just to select the media type, as we did in our last video. We need to write CSS rules that apply only when certain characteristics are met–when the device is in landscape format, for example, or when the viewport is wider than 800 pixels.
In our last video, we used CSS media
queries to optimize our layout for
0:00
the printed page.
0:06
While that's useful, and a fun exercise,
0:08
I would imagine you're anxious to
design for different screen sizes.
0:11
After all, a few things are more
exciting for a front-end web developer
0:16
than launching a site that looks equally
great on a small and large screen.
0:22
To target different characteristics
of the screen viewing our web page,
0:27
we need more than just to select the media
type, as we did in our last video.
0:33
We need to write CSS rules that apply only
when certain characteristics are met.
0:39
When the device is in landscape format,
for example, or
0:46
when the viewport is
wider than 800 pixels.
0:51
This CSS Tricks article, called
"A Complete Guide to CSS Media Queries,"
0:55
offers a useful diagram called
Anatomy of a Media Query.
1:00
In our last video, we learned to write
at rules and select by media type.
1:06
We used the print media type previously,
but
1:12
in this video we're going
to concentrate on screen,
1:16
which targets device screens like
computers, tablets and phones.
1:20
The diagram also shows us how
to select media by feature.
1:25
If I uncollapse the media features chart,
I see a great big
1:30
list of potential features media
queries allow us to specify.
1:36
This is a great resource to keep
bookmarked, but there's one feature here
1:41
you'll target more often than any other
and it's right at the top of the chart.
1:46
Modifying your design and layout based
on the width of the viewport is a great
1:52
tool for creating experiences that
are legible on a variety of screens.
1:57
Let's take a look,
With inspect mode showing,
2:03
I'm going to narrow my
viewport to 320 pixels,
2:08
The size of an older phone screen.
2:15
And I can see that at this size,
most of my content is legible enough,
2:18
but my footer looks a bit awkward.
2:24
I don't think these three list
items look all that great
2:26
side by side until my viewport reaches
a minimum width of around 730 pixels.
2:32
I'm going to start by editing my original
2:40
declaration to stack these
list items vertically.
2:44
Now, our content looks
better on the mobile screen,
2:52
I might still add a bit of bottom margin,
2:58
To separate our list items
3:04
Developers typically use their base
CSS to get, the mobile screen right.
3:10
This minimizes, the amount of CSS,
the phone has to load,
3:15
which should speed up loading
time on small screens.
3:20
Now, let's create a media query
to target device screens.
3:24
And to change those list items
3:30
once the viewport is at least
3:35
730 pixels wide.
3:40
And look at that, you've created content
3:53
that changes based on viewport width.
3:58
At the end of the previous
stage we noticed that the area
4:07
of developer Diane's blog that
uses float doesn't allow for
4:11
comfortable space for
our body copy on small screens.
4:16
Perhaps we'd like to make
a change around 600 pixels.
4:20
Let's create a new rule for
our class called .small-img,
4:28
That allows the image to occupy 100%
of the viewport width on small screens.
4:36
Once again we've solved for
mobile behavior first.
4:44
Now, let's cut our two rules for
.small-img and
4:49
.clear and paste them into a media query.
4:54
Try that out in the browser and
expand and contract your viewpoint.
5:20
That's a pretty clear illustration of
what CSS media queries are capable of.
5:27
CSS media queries are really powerful and
your capabilities as a developer,
5:34
are a lot more impressive than they
were at the beginning of this video.
5:39
You'll be building responsive
layouts before you know it.
5:44
However, before we get much
further with using media queries,
5:49
we should investigate a peculiarity in
the way mobile browsers view our content.
5:54
We'll check it out in our next video.
6:00