Preview
Video Player
00:00
00:00
Understanding Breakpoints
2:53In responsive web design, you can think of a breakpoint as a width where the current layout must adjust to properly display content. Media queries can be used to determine the changes that take place at different breakpoints.
In responsive web design, you can think of
a break point as a width
0:00
where the current layout no longer works
and the layout breaks.
0:04
If the layout breaks, then it necessitates
a media query that adjusts the layout.
0:09
For example, in a typical mobile first
approach,
0:16
you might start out with a single column.
0:20
When that single column is stretched
across a large wide screen monitor,
0:23
it's not going to look good anymore.
0:28
Text will be difficult to read across,
buttons will be far away from each other,
0:30
and it generally won't take advantage of
the available screen space.
0:35
Let's take a look at a quick example.
0:40
So here I have my workspace open, and down
here, in main.css,
0:43
where we have our media queries, we have
several responsive break points.
0:50
So, if we look at how our page works right
now,
0:57
we can go down to this small mobile size,
everything looks good there and
1:01
as we size things up, we have a couple of
different break points,
1:06
depending on where the layout just doesn't
look good anymore.
1:11
So let's try to comment out these media
queries and see what happens.
1:15
So I'll select all these, and I'll just
hit Cmd slash to comment them out and
1:23
save it, and then, I'll resize my browser
here, so it's small, and
1:29
then I will refresh the page, and it
doesn't look like anything's happened.
1:34
That's because our mobile styles are
already applied in our mobile first
1:39
approach, but if I resize the browser,
you'll
1:43
notice that now nothing happens, because
we removed all of our media queries.
1:49
And really, this layout necessitates a
break point,
1:54
because you'll notice that this text goes
all the way across the page, and
1:58
it's pretty difficult to read across and
then go down to the next line.
2:03
And you'll also notice that these
navigation buttons no longer
2:08
really look like buttons anymore because
they're stretched across this huge layout.
2:13
So let's resize that, and let's go back to
our workspace.
2:18
So we'll uncomment that and save it just
by hitting Cmd+Z or
2:26
Ctrl+Z to undo, and then when we refresh,
we should get our layout back.
2:31
So when a website crosses a certain
threshold where the layout
2:37
doesn't really work anymore, we need to
create a media query.
2:42
Generally, any media query that adjusts
the layout based on a certain width
2:46
could be called a break point.
2:50