HTML, CSS, & JavaScript All-in-One For Dummies

Chapter 4

Creating Responsive Layouts

IN THIS CHAPTER

Using Flexbox, Grid, and viewport units for fluid layouts

Using media, container, and user preference queries for adaptive layouts

Making your page typography responsive

Delivering images responsively

Getting to know the mobile-first approach to layout

We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.

— ETHAN MARCOTTE

Chances are, you do all or most of your web page coding on a relatively large screen, either using a full-size desktop monitor or a notebook screen. Nothing wrong with that, of course, except that it can (and all too often does) lead to a big problem: You end up building your web page so that it looks good and works properly only on larger screens. Why is that a problem? For the simple reason that your page’s visitors will ...