CSS Rem Unit for Element Sizes

Question

I've noticed that REM unit can usable for element's sizes, not for only font-sizes. And very usefull with HTML font-size property.

html { font-size:1vw }
@media all and (max-width:720px) {
    html { font-size:10px }
}
#el { width:20rem;height:5rem }

But is it proper and trustable?

Answer 1

I think thats up to you.

I usually apply:

• REM for font-sizes with px callback, best !
• EM for paddings and margins
• px, %, vw and vh for element sizes
• and for media queries i use em, but rem and px are usually used too.

You can mess up everything with children element if you use em for font-size, so not recommended.

REM for size elements is interesting, but i'm enjoying a lot the vw and vh for responsive behaviors for some cases where % is not enough.

And you can do some cool stuff with the CSS calc function

like width: calc(100% - 85px); for some fixed size within your design.

This is a Recommended read about the units :) Hope this help you.