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