Preview
Video Player
00:00
00:00
Media Query Review
7:17Media queries are CSS rules that help us include CSS code only when certain conditions are met. These conditions are called media features, and in the case of responsive web design, the media feature most commonly used is width, or more specifically, min-width.
[MUSIC]
0:00
By now, you've probably already used media
queries in a few projects.
0:04
But it's hard to talk about responsive web
design without building a solid
0:08
understanding of media queries.
0:13
Of course, media queries are CSS rules
that help us
0:15
include CSS code only when certain
conditions are met.
0:19
These conditions are called media
features.
0:23
And in the case of responsive web design,
the media feature most commonly used
0:26
is width, or more specifically, min or
minimum width.
0:31
Something you might not realize is that
media queries actually come with
0:37
many media features, and that width is
just one of them.
0:41
Let's head over to the Mozilla Developer
Network to check out the documentation for
0:46
some media features in media queries.
0:51
So here I have the MDN documentation for
0:55
media queries, and we're looking at the
section called media features.
1:00
So in addition to width, which we can pull
up just by clicking right there,
1:05
there are several other media features,
and
1:11
they're all listed out here on the right
side.
1:14
Now, most of these you won't actually need
to use.
1:18
But one of them that I would like to draw
to your attention is orientation.
1:22
So some of these are useful in very
specific instances,
1:29
but orientation is pretty useful when
dealing with mobile devices.
1:34
And you can detect whether or not the
device is in landscape or
1:40
portrait mode.
1:45
Detecting width is a great start, but if a
user decides to browse on a mobile device
1:49
in landscape mode, some layouts might not
take advantage of the extra width,
1:54
requiring more scrolling than is
desirable.
2:00
Scrolling is common when a mobile layout
is reduced to one column, but
2:04
heavy scrolling is less than ideal when in
landscape.
2:08
For these lessons, I've created some
examples to help isolate these concepts.
2:13
I've used the initializer project and
modified it to get started,
2:18
but if you'd like to check out the
initializer project yourself,
2:23
you can find a link in the notes
associated with this video.
2:27
Now let's take a look at an example of
orientation in Workspaces.
2:31
So here I have a very simple layout.
2:37
And before we take a look at the code,
let's actually go to the preview and
2:41
see what that looks like.
2:46
So like I said, that's a pretty simple
layout.
2:48
We have a title up here.
2:50
We have some tabs.
2:51
There's two columns, and if I scroll down,
there's a footer down at the bottom.
2:53
Now I can resize this, and you'll notice
that the media queries start to
2:59
kick in right away and make some small
changes.
3:03
And then as the layout starts to break
down,
3:07
some more dramatic changes occur where we
go to a single-column layout.
3:11
And then as we keep going and the tabs
don't really work anymore,
3:16
they will flip over to this vertical
layout.
3:22
So let me resize this and let's go back to
our workspace here.
3:27
It's pretty simple HTML, nothing you
shouldn't already be familiar with.
3:34
We have a div, which is the header
container, and
3:38
then we have a header inside of that with
an h1 and some navigation.
3:42
And then we also have this container area,
where there is an article.
3:49
And then there's also an aside, and
3:56
then finally down at the bottom, we have a
footer.
4:00
So the markup is pretty straightforward.
4:04
Let's take a look at the CSS quickly.
4:07
And here we have just some basic styling.
4:09
We're use box-sizing border-box for pretty
much everything.
4:12
Remember, these are going to be our mobile
styles
4:18
first because we're using a mobile first
approach.
4:22
And then as we work our way up to larger
sizes,
4:27
that's when our media queries will start
to kick in.
4:30
So first, at that small mobile size, we go
from that list to our tabbed layout.
4:33
And then from there, we go from a single
column to a multi-column layout.
4:41
And then finally, we just make a few more
adjustments for larger screen sizes.
4:46
And down at the bottom, we just have this
quick clearfix here.
4:52
Now, one of the problems with this and one
of the problems that orientation can fix
4:56
is that in landscape mode, we end up
getting a layout that is less than ideal.
5:02
So let's take a look at this on a mobile
device.
5:07
[SOUND] So when I'm in portrait mode, this
looks just fine.
5:10
But when I [SOUND] go to landscape,
5:14
the header takes up a pretty large amount
of a screen,
5:17
and it creates unnecessary scrolling.
5:22
So let's see if we can take one of the
media queries we already have and
5:26
apply some orientation to get a better
layout in landscape.
5:31
So specifically, I'm going to take this
media query right here,
5:36
and we can have multiple media queries
just by adding a comma.
5:41
And so, if this media query is true or the
second media query that
5:47
I'm about to write is true, then we'll get
this code applied.
5:52
So let's write our second media query
here.
5:56
So we'll say only screen.
5:59
So it's screen layouts and not something
like print.
6:03
And then we'll use the Boolean operator
and, and we'll say,
6:08
min width is about 700 pixels
6:11
because we want to try to hit that
landscape layout.
6:17
And I'm on an iPhone 6 Plus here, but
6:21
different screen sizes will vary, so be
sure to experiment with that.
6:24
And then I'll have another Boolean
operator there,
6:29
and I'll say and orientation, landscape.
6:34
And in this case, Workspaces is not
recognizing these keywords,
6:39
but that's just fine.
6:43
We know that they work in a browser.
6:44
So I'll save that out.
6:46
And now if we switch back to our phone
here, and I have it in landscape,
6:48
and I refresh the page, you'll see that we
get a layout that is much more ideal and
6:54
better suited to this large landscape
layout.
7:01
That's just one way that we can make use
of more advanced media queries.
7:06
I've included a link to the documentation
in the notes so
7:11
that you can read more on your own.
7:14