1
00:00:00,920 --> 00:00:06,909
In our last video, we used CSS media
queries to optimize our layout for

2
00:00:06,909 --> 00:00:08,544
the printed page.

3
00:00:08,544 --> 00:00:11,620
While that's useful, and a fun exercise,

4
00:00:11,620 --> 00:00:16,621
I would imagine you're anxious to
design for different screen sizes.

5
00:00:16,621 --> 00:00:22,131
After all, a few things are more
exciting for a front-end web developer

6
00:00:22,131 --> 00:00:27,835
than launching a site that looks equally
great on a small and large screen.

7
00:00:27,835 --> 00:00:33,527
To target different characteristics
of the screen viewing our web page,

8
00:00:33,527 --> 00:00:39,331
we need more than just to select the media
type, as we did in our last video.

9
00:00:39,331 --> 00:00:46,260
We need to write CSS rules that apply only
when certain characteristics are met.

10
00:00:46,260 --> 00:00:51,060
When the device is in landscape format,
for example, or

11
00:00:51,060 --> 00:00:55,066
when the viewport is
wider than 800 pixels.

12
00:00:55,066 --> 00:01:00,953
This CSS Tricks article, called
"A Complete Guide to CSS Media Queries,"

13
00:01:00,953 --> 00:01:06,202
offers a useful diagram called
Anatomy of a Media Query.

14
00:01:06,202 --> 00:01:12,612
In our last video, we learned to write
at rules and select by media type.

15
00:01:12,612 --> 00:01:16,147
We used the print media type previously,
but

16
00:01:16,147 --> 00:01:20,333
in this video we're going
to concentrate on screen,

17
00:01:20,333 --> 00:01:25,741
which targets device screens like
computers, tablets and phones.

18
00:01:25,741 --> 00:01:30,721
The diagram also shows us how
to select media by feature.

19
00:01:30,721 --> 00:01:36,000
If I uncollapse the media features chart,
I see a great big

20
00:01:36,000 --> 00:01:41,733
list of potential features media
queries allow us to specify.

21
00:01:41,733 --> 00:01:46,255
This is a great resource to keep
bookmarked, but there's one feature here

22
00:01:46,255 --> 00:01:51,090
you'll target more often than any other
and it's right at the top of the chart.

23
00:01:52,250 --> 00:01:57,799
Modifying your design and layout based
on the width of the viewport is a great

24
00:01:57,799 --> 00:02:03,103
tool for creating experiences that
are legible on a variety of screens.

25
00:02:03,103 --> 00:02:08,348
Let's take a look,
With inspect mode showing,

26
00:02:08,348 --> 00:02:12,915
I'm going to narrow my
viewport to 320 pixels,

27
00:02:15,383 --> 00:02:18,358
The size of an older phone screen.

28
00:02:18,358 --> 00:02:24,100
And I can see that at this size,
most of my content is legible enough,

29
00:02:24,100 --> 00:02:26,983
but my footer looks a bit awkward.

30
00:02:26,983 --> 00:02:32,471
I don't think these three list
items look all that great

31
00:02:32,471 --> 00:02:40,311
side by side until my viewport reaches
a minimum width of around 730 pixels.

32
00:02:40,311 --> 00:02:44,513
I'm going to start by editing my original

33
00:02:44,513 --> 00:02:49,804
declaration to stack these
list items vertically.

34
00:02:52,664 --> 00:02:58,661
Now, our content looks
better on the mobile screen,

35
00:02:58,661 --> 00:03:03,201
I might still add a bit of bottom margin,

36
00:03:04,781 --> 00:03:08,492
To separate our list items

37
00:03:10,242 --> 00:03:15,523
Developers typically use their base
CSS to get, the mobile screen right.

38
00:03:15,523 --> 00:03:20,359
This minimizes, the amount of CSS,
the phone has to load,

39
00:03:20,359 --> 00:03:24,733
which should speed up loading
time on small screens.

40
00:03:24,733 --> 00:03:30,529
Now, let's create a media query
to target device screens.

41
00:03:30,529 --> 00:03:35,523
And to change those list items

42
00:03:35,523 --> 00:03:40,716
once the viewport is at least

43
00:03:40,716 --> 00:03:44,328
730 pixels wide.

44
00:03:53,167 --> 00:03:58,972
And look at that, you've created content

45
00:03:58,972 --> 00:04:04,303
that changes based on viewport width.

46
00:04:07,190 --> 00:04:11,528
At the end of the previous
stage we noticed that the area

47
00:04:11,528 --> 00:04:16,434
of developer Diane's blog that
uses float doesn't allow for

48
00:04:16,434 --> 00:04:20,793
comfortable space for
our body copy on small screens.

49
00:04:20,793 --> 00:04:24,061
Perhaps we'd like to make
a change around 600 pixels.

50
00:04:28,004 --> 00:04:33,704
Let's create a new rule for
our class called .small-img,

51
00:04:36,065 --> 00:04:42,962
That allows the image to occupy 100%
of the viewport width on small screens.

52
00:04:44,983 --> 00:04:49,571
Once again we've solved for
mobile behavior first.

53
00:04:49,571 --> 00:04:54,469
Now, let's cut our two rules for
.small-img and

54
00:04:54,469 --> 00:04:58,904
.clear and paste them into a media query.

55
00:05:20,649 --> 00:05:24,910
Try that out in the browser and
expand and contract your viewpoint.

56
00:05:27,142 --> 00:05:34,433
That's a pretty clear illustration of
what CSS media queries are capable of.

57
00:05:34,433 --> 00:05:39,916
CSS media queries are really powerful and
your capabilities as a developer,

58
00:05:39,916 --> 00:05:44,993
are a lot more impressive than they
were at the beginning of this video.

59
00:05:44,993 --> 00:05:49,503
You'll be building responsive
layouts before you know it.

60
00:05:49,503 --> 00:05:54,363
However, before we get much
further with using media queries,

61
00:05:54,363 --> 00:06:00,573
we should investigate a peculiarity in
the way mobile browsers view our content.

62
00:06:00,573 --> 00:06:02,790
We'll check it out in our next video.