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 ...

Get The Responsive Web now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.