This course will be retired on July 12, 2021. We recommend "CSS Basics" for up-to-date content.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
With media queries, we're able to enhance the browsing experience of websites on multiple devices and viewport sizes. This allows us to tailor our content to a wide range of devices without having to change anything in the HTML.
These days one of the most important
responsibilities we have as web
0:00
designers or front-end developers is being
able to
0:03
define how content is presented on
different devices.
0:06
Fortunately, CSS media queries have given us a
convenient way of
0:10
targeting different devices, resolutions,
browser dimensions, and more.
0:13
So, we're able to tailor our content to a
wide range of devices without having to
0:17
change any of the actual content because
it's all controlled within the CSS.
0:22
With just a few media queries, we're able
to enhance the browsing experience of
0:27
websites on multiple devices and viewport
sizes, because our content can respond or
0:31
adapt to the device that's displaying it.
0:36
Now there are a few ways we can include
media queries in our pages but
0:39
we're going to use the most common method
which is adding the media
0:43
query rules directly in our CSS.
0:46
So, the first thing I'm going to do is
copy this top comment,
0:49
then scroll down to the bottom of our
style sheet, and
0:53
let's add some space right below the float
clearfix and I'll paste comment,
0:57
and then I'm going to change it so it
reads media queries.
1:04
So a media query is simply a style block
containing one or various conditions.
1:12
And, if those conditions are true, the
media query takes effect.
1:18
If they're false, the browser or device
ignores them.
1:21
So, let's take a look at what makes up a
media query.
1:24
To create our first media query, we'll
type @ media,
1:27
followed by a set of parentheses, then a
set of curly braces.
1:32
So the at media rule is what specifies the
media type we want to target.
1:37
And there are a few recognized media types
we can use so
1:43
that we're able to create CSS and serve it
specifically to any of those media types.
1:46
So, for example, the all media type
targets all devices.
1:51
There's also a media type for Print,
Green, even one for Speech.
1:56
So we want our media queries to affect all
devices and
2:02
computer screens, so, we'll want to go
with the all media type.
2:05
So, right after the at media statement,
let's type All.
2:09
Now All is the default media type for
media queries.
2:14
So we can actually omit it from our media
statement if we want to.
2:18
So remember, if you don't define a media
type, the All type will be implied.
2:22
So now, we will need to write an
expression inside the parenthesis that
2:27
will check for those true or false
conditions I mentioned earlier.
2:31
So first, we need to define the media
feature we are testing for.
2:35
Some of the media features we can use are
width, height.
2:40
We can also check for things like
max-width,
2:43
max-height, also a device's orientation
and a few other features.
2:46
So we're going to use the max-width media
feature to check for
2:50
the max-width of the browser's viewport.
2:55
Then, we're gonna follow that with a colon
and
2:58
define a pixel based value of 960 pixels.
3:01
But we can also make this a percentage
value, an M value or any linked unit.
3:06
Now, one important thing to keep in mind,
3:11
is that we don't need to include a semi
colon after the value.
3:12
Otherwise, the entire media query is
ignored.
3:17
I know it's a common mistake to make
because we're so
3:21
used to adding a semicolon after every CSS
declaration.
3:23
So, make sure to keep those semi-colons
out of the media feature expressions.
3:26
So this expression will query the
max-width of the display area,
3:31
which in our case is the browser's E-port.
3:37
So with this media query in place, we can
create subtle or
3:40
drastic changes in the layout or
appearance of
3:43
our website whenever the browsers viewport
is at or below 960 pixels.
3:46
And we can do that with regular CSS rules.
3:52
So, inside the media query Rule, let's
target the body of the page
3:55
using the body type selector that inside
the body rule.
4:01
Let's add a background property and
4:05
set the background value to the color
royal blue [SOUND].
4:09
And right below the body rule,
4:13
let's target all paragraphs on the page
with the P selector.
4:15
Let's give it a color property and set the
color value to white.
4:21
So let's save our style sheet and refresh
the browser.
4:25
So now we can see how those colors are
applied to the body and
4:30
paragraphs whenever the browser width is
resized.
4:34
So right when the view port hits that 960
pixel width,
4:38
the colors change and they remain that way
as the browser gets narrower.
4:42
But once we're at anything wider than 961
pixels,
4:48
they change back to their original colors.
4:52
So let's go back to our style sheet and
add another media query.
4:56
So right beneath the media query we just
wrote,
5:00
let's create a new one by writing @media.
5:03
And once again, we're going to use the
max-width media feature but
5:07
this time we're gonna set the value to 480
pixels.
5:12
[BLANK_AUDIO]
5:15
So inside the new media query rule, let's
once again target body element.
5:20
And inside the body rule, we'll add a
background property.
5:27
And this time, lets set the background to
the color value dark red.
5:31
Okay.
5:36
Now, when we save our style sheet and
refresh browser, notice how the background
5:36
color still turns blue and the paragraph
colors change to white at 960 pixels.
5:43
But once the view port is equal to or
5:50
below 480 pixels, the background color
turns dark red.
5:52
And notice how the paragraph's font colors
still remain white
5:57
even though we didn't specify it In the
new media query.
6:01
Well, the color values still apply because
the conditions we've
6:05
set in the top media query are still true.
6:08
The view port width is still less than 960
pixels.
6:12
So unless we override it with a new
property,
6:16
like we did here with background, the text
color will remain white.
6:19
But if we want to define certain styles
only at a certain range of viewport sizes,
6:24
well, what's great about media queries is
that we're able to add or
6:29
combine expressions if we need to get more
specific about a device or
6:32
a viewport range.
6:37
So let's add one more media query in our
style sheet by typing @media.
6:39
And this time, we're gonna use the min
width media feature and
6:44
the value is going to be 481 pixels.
6:49
Now, after the set of parenthesis we're
gonna type the word and
6:53
followed by a new set of parentheses.
6:57
And in this expression, we're going to use
the max width media feature and
7:00
set the value to 700 pixels.
7:06
So in this media query the and
7:12
operator is combining these two expressions
between the parentheses.
7:15
So, when the device or view port is
between the range of 481 pixels and
7:20
700 pixels, it's going to display the
styles we're about to write.
7:27
So inside our new media query rule let's
once again target the body
7:31
element with the body selector, and we're
going to add a background property, and
7:35
this time we're going to set the
background to the color sea green, and
7:41
let's remove the p rule from our first
media query.
7:46
I'll simply select and cut it out of the
media query.
7:49
Then we're gonna use it in our new media
query,
7:53
so right below the body rule I'll paste in
the new media query.
7:55
Alright,.
.
8:00
So, let's save our style sheet and go back
to the browser and refresh the page.
8:00
So now, when we resize our browser, notice
how the green background and
8:05
white text color are only applied between
the max width of 700 pixels and
8:11
minimum width of 481 pixels.
8:17
So when the view port is between 481
pixels and 700 pixels.
8:20
Okay.
So,
8:28
now that we have the Media Query
basics down,
8:28
we'll see how we can use this logic to
enhance our final layout.
8:31
You need to sign up for Treehouse in order to download course files.
Sign up