Join James Williamson for an in-depth discussion in this video Creating breakpoints with media queries, part of Responsive Design Fundamentals.
- View Offline
Now that we know a little bit more about media queries, we need to take a closer look at…how they're implemented in a responsive design workflow.…We'll start by exploring the concept of a breakpoint.…A breakpoint indicates the moment your layout switches from one layout to another, and is…usually triggered by the width of a screen. Take this example.…When I resize the screen, you can see the containing block changes both size and color…when the viewport reaches a certain size.…The screen sizes are based on the typical screen sizes for smartphones, tablets, and desktop devices.…
While many layouts will have more than these three basic breakpoints, almost all responsive…designs will feature some combination of those three screen size ranges.…This means that one of the first things that you need to do when planning a responsive…design is define the breakpoints for your layout.…Here you see a list of three of the most common breakpoints.…Mobile styles will target any screen smaller than 480 pixels wide, while tablet styles…
- What is responsive design?
- Controlling viewports
- Designing for multiple screen densities
- Working with media queries
- Using fluid grids
- Building responsive forms
- Optimizing site performance
- Building responsive mockups
- Developing a content strategy
- Designing for mobile capabilities
- Creating flexible HTML
- Testing responsive designs