CODEWITHSUNDEEP
css
Digerkam
Digerkam

Reputation: 1921

CSS Rem Unit for Element Sizes

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?

Upvotes: 3

Views: 2014

Answers (1)

Héctor León
Héctor León

Reputation: 2400

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.

Upvotes: 5

Related Questions