You don't need media queries

With so many different screen sizes, are media queries even worth it?

Course image for You don't need media queries

The contemporary problem.

Media queries are being used for years and help us to build websites and web apps for different screen sizes with a responsive layout. But with the launch of so many different smartphones, tablets, laptops, monitors and other multimedia devices we have to take in consider a lot of resolutions. So the question remains: "What breakpoints are we going to use?".

But what if I told that you don't need any, or at least a lot less than usual? Let's dive in. (and PS: yes, I do use media queries on this website too)

Responsive Flexbox layouts.

The most common usecase of responsive webdesign is in the layout of a webpage. With the adaption of Flexbox and CSS Grid we can create complex layout for different resolution without the use of media queries. But first let's take a look at an example of an 'old fashioned' way of creating a responsive design using Flexbox and media queries:

See the Pen Responsive layout using Flexbox and Media Queries by Wesley van Drimmelen (@elDrimm) on CodePen.

In the example above I've used three different breakpoints: 768px, 992px and 1200px. On every breakpoint we change the width of the column to get the result we want in quite a few lines of code. This is not a problem in itself, however these are some harsh breakpoints and the elements are therefore not truly adapting to the screen size. The elements are not calculating the width they can or should be, but you are.

Now let's look at an example where we let the layout calculate the sizes using flexbox:

See the Pen Responsive layout using Flexbox WITHOUT Media Queries by Wesley van Drimmelen (@elDrimm) on CodePen.

As you can see, the total lines of code required to get a near exact copy of the layout is way less using an adaptive flexbox grid (10 vs 28 including white-space). Let me briefly explain the above flex: example:

  • The first property (1) specifies how much the element will grow, allowing it to grow bigger;
  • The second propery (0) specifies how mucht the element will shrink;
  • The last property (300px) specifies the basis of the element.

In other words it means: "Take up 300px in width, you can grow bigger if you have to but you can't shrink (to e.g. 200px)".

This makes them react differently to different screen sizes since it stretches out some elements to fill in the row. But you probably don't want that, right? Luckily for you there is another solution out there: CSS Grid.

Responsive grid layout.

CSS Grid isn't used as much as flexbox, but it is adopted in every modern browser and it allows for creating layouts which were hard to build at first. Remember that we 'refactored' our 28 lines to 10 lines? We can reduce this even further with CSS Grid. We can create the layout we want with just three lines of CSS:

See the Pen wvzbWzV by Wesley van Drimmelen (@elDrimm) on CodePen.

By setting the grid-gap the browser automatically adds spacing between the different grid elements. What the grid-template-columns does is automatically filling the row with the items according to the available space. Next we set the elements in the grid to have a a minimum of 250px width and up to one fraction.

Congratulations! We've created a fully responsive layout with just three lines of code! But a layout is fun, but how about the rest?

Responsive fonts.

We've just created a responsive layout with just three lines of code, but sometimes you want to have responsive fonts aswell. A font of 100px might look good on a desktop, it doesn't on mobile. Trust me, I've been there.

I still often see the following responsive font-sizes:

h1 {
  font-size: 2rem;
}

@media screen and (min-width: 768px) {
  h1 {
    font-size: 3rem;
  }
}

@media screen and (min-width: 992px) {
  h1 {
    font-size: 4rem;
  }
}

etc..

In the example above it is quite clear how this works, but if you would do this with every heading element (h1 to h6) it can become quite large and unclear.

You could create a mixin with Sass and include it everywhere to make it more clear (for example: @mixin fontSize($font-size-sm, $font-size-md, ...)), however this still requires a bunch of unnecessary code.

If I told you this all can be changed to just one single property, would you believe me? Well, I'm not lying. All of the media queries can be replaced by a single CSS function: clamp().

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

Clamp does everything we want and scales the font-size accordingly. The first value sets the minimum value of the font-size, the second value is the preferred value and the last value is the maximum allowed value (learn more about clamp here) or view the example here.

Example of a responsive heading

Margins and paddings.

We've discussed quite a bunch of stuff already and it's time for the last topic of this article: margins and paddings. We've talked about the clamp() function, the best part about this function: it's not only usefull for font-sizes!

See the Pen Responsive Margins & Paddings without Media Queries by Wesley van Drimmelen (@elDrimm) on CodePen.

Conclusion.

In this article we've talked about responsiveness without Media Queries, and it's not even complicated! I am not trying to convince everybody to stop using media queries (and yes I use them aswell on this website), but it can reduce complexity, increase readability and improve efficiency.

Thanks for reading and stay safe,

Wesley