Chapter 5. Responsive layouts
This chapter covers
- Using percentages to create fluid layouts
- Animating the off-canvas navigation pattern
- Adjusting the layout for varied screen sizes
Building a responsive layout is, quite possibly, the easiest task in building a responsive website. All a layout has to do is gracefully refactor at given breakpoints. In chapter 1, I showed you some media queries to enable this refactoring, and you saw how selectors can override each other when applied from within a media query. To build a responsive layout, you just need to apply this logic. An element in a small screen should be one width, and then another width in a larger screen. But despite how simple this sounds, things always find a way of getting more ...