I don’t like @media queries. I think they are an anti-pattern because they create bloated code that requires a lot of maintenance. They are the opposite of generic.

That’s why I try to avoid them when building responsive layouts and try to define layout change implicitly. The necessary patterns have all been invented years ago. Here are the two that I consider most important:

Pattern 1: Use rem

Try to specify font sizes and elements sizes in rem, the font size of the root element. Of course percentages are allowed as well, though you will rarely use them with flexboxes.

This has two advantages: First, it gives the browser, the entity who knows best what device it is running on, the freedom to define how big the font should be. In practice, 1rem will usually be 16px, but still: When using rem, you ask the browser what a readable font size is and express everything in units of that size. Secondly, if you really need to scale your design with a media query, you can easily do something like:

@media (max-width: 900px) {
  html { font-size: 15px; }
}

, thereby scaling the whole document.

Pattern 2: Use Flexbox

Seriously. Flexbox makes a whole lot of things a whole lot easier.

In terms of responsive layouting, here is how you build a design with a side bar that always fills the full screen width but re-orders from horizontal to vertical on small screens:

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
      </head>
    <body>
      <div class="main">
        main content
      </div>
      <div class="sidebar">
        sidebar content
      </div>
    </body>
</html>
body {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.main {
    flex-grow: 3;
    flex-basis: 60rem;

    /* cosmetic properties for better demonstration */
    min-height: 70vh;
    background-color: lightgrey;
}
.sidebar {
    flex-grow:1;
    flex-basis: 20rem;

    /* cosmetic properties for better demonstration */
    min-height: 100vh;
    background-color: lightgreen;
}

Flexbox has a quite a few knobs and buttons; and they are all worth knowing. For example the flex-basis property: It defines how big the flex item tries to be before leftover space in the flexbox is distributed according to the flex-grow and justify-content properties. Like min-width, it can trigger a flex-wrap into the next line. But other than min-width, it still allows the item to shrink below the size specified size if there is really not enough space.

If you want to get some inspiration, have a look at Solved by Flexbox and their great examples.

Subscribe via RSS