Responsive Layouts, Fewer Media Queries
Written by Bram.us
/ Original link
on Nov. 29, 2021
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(), 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 😅