DEV Community

How to make responsiveness super simple with CSS Variables

Per on August 06, 2019

Click the image to get to the free full-length CSS Variables course. If you haven’t heard of CSS Variables before, it’s a new feature of CSS which...

Read full post

Nicola • Aug 6 '19

The only issue related with css variables is IE (every time is IE the problem) compatibility.

I prefer to use vars only with SCSS, because I need to give IE compatibility for my projects.

Anyway nice examples, I love the new css grid system, expecially if combined with flexbox!

Tobias Buschor • Aug 6 '19

You can try this polyfill:
github.com/nuxodin/ie11CustomPrope...

Bayu Angora • May 27 '20 • Edited

Also, CSS variable can't be rendered by Opera Mini with extreme mode. We have to use normal mode to render CSS variable with Opera Mini.

Nicola • May 28 '20

Consider than I've never tested it on a mobile browser because is still a WIP, anyway thanks for the feedback.

Alexander • Jun 11

You absolutely nailed the fundamental advantage of CSS custom properties in this tutorial. Taking it a step further, pairing those root variables with the clamp() function completely eliminates the need to redefine them inside media queries. You set a fluid typography range once at the root level and let the browser handle the math across viewports automatically. It makes maintaining responsive layouts across complex component trees vastly more predictable.

Garrett / G66 • Aug 6 '19

This is exactly the post I needed today. Thank you!

Zarni • Aug 7 '19

"The only issue related with css variables is IE (every time is IE the problem) compatibility.

I prefer to use vars only with SCSS, because I need to give IE compatibility for my projects.

Anyway nice examples, I love the new css grid system, expecially if combined with flexbox!" by Nicola. ->>me too

Zach Saucier • Aug 15 '19

Or you could use this exact same approach with the rem unit and have better browser support.

Vusi • Oct 14 '21

Thanks a lot, this was really helpful because I've been struggling with responsiveness for a while now. Didn't realize how powerful CSS variables are.

Ryan Furrer • Aug 6 '19

Great post! I've just started messing with CSS Variables and hadn't thought of using them this way. It's so much cleaner and IMO makes responsiveness much less daunting.