Understanding Breakpoints2:53 with Nick Pettit
In 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
You need to sign up for Treehouse in order to download course files.Sign up