Responsive Layouts, Fewer Media Queries

Over at CSS-Tricks you can read a min-bending article by Temani Afif

Since the introduction of media queries (literally decades ago), CSS has evolved to the points that there are a lot of tricks that can help us drastically reduce the usage of media queries we use. In some cases, I will show you how to replace multiple media queries with only one CSS declaration. These approaches can result in less code, be easier to maintain, and be more tied to the content at hand.

Common theme in all code shown is the use if max() and clamp(), as seen in the Raven Technique, resulting in code that’s hard to grasp:

grid-template-columns: repeat(auto-fit, minmax(clamp(100% / (var(--n) + 1) + 0.1%, (var(--w) - 100vw) * 1000, 100% / (var(--m) + 1) + 0.1%), 1fr));

Be sure to stick around for the More Tricks section of the post, as it also holds some nice things you can do:

  • Conditional background color
  • Toggling an element’s visibility (by conditionally limiting the height/width)
  • Changing the position of an element

While I do like the results, I’ll stick to using the more readable CSS Container Queries syntax once that becomes stable 😅

Responsive Layouts, Fewer Media Queries →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.