Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Understanding Breakpoints2:53 with Nick Pettit
In responsive web design, you can think of a breakpoint as a width where the current layout no longer works and the layout breaks. If the layout breaks, then it necessitates a media query that adjusts the layout.
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
You need to sign up for Treehouse in order to download course files.Sign up