W
W
weranda2015-04-25 20:58:14
css
weranda, 2015-04-25 20:58:14

Is it possible to use rem (root em) units in general for everything in CSS?

Greetings.
I read a lot on the net about rem units, but I don’t seem to fully understand it. They write that basically rem is used for:
- font-size
- line-height
- padding and margin of text blocks and only for them, at least that's what they advise. Nothing is really written in the W3C specification, two lousy lines.
Is it possible to use rem to indent blocks from each other, or is it better to use units like PX or % or rem STRICTLY for text and its accompanying padding and margins for outer margins? EM don't even want to use, one headache from them with their inheritance. Older browsers don't really bother, so rem was chosen.
For example, set the html tag to a font size of one pixel and use rem - is it possible or not necessary and why?
Could you explain in detail how, why, when, etc. to use rem?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
E
Evgeny Petrov, 2015-04-25
@weranda

Is it possible to use rem to indent a block from each other

What for? The value in rem is needed to ensure that the base size is obtained. Meanwhile, text blocks inherit font size, and percentages, em , are used for that .
Well, this is beyond good and evil :) By specifying the font size in :root (aka html ), you set the starting point for the inheritance of body and all other elements. For what purpose would you ever need a base size of 1 pixel?

N
Nikolay Talanov, 2015-04-25
@Ronnie_Gardocki

I do it like this:

html, body {
  font-size: 62.5%; // 1rem = 10px и никакой попаболи как с EM
}

And I’ve been typing everything only in rem for more than half a year (with the exception of thin borders of 2-3px and similar micro-things, which, when the font-size for html, body is reduced, can become thinner than necessary).
The main feature is the ability to scale the entire layout for different resolutions. Want to make everything 25% bigger for monitors wider than 1600px? You just write:
html, body {
  @media (min-width: 1600px) {
    font-size: 78.125%;
  }
}

And the whole layout magically scales perfectly. The same goes for downgrading, very convenient in adaptive layout.
Rem has some shortcomings, but they are harmless for normal people - ie9+ and a bug with a small inaccuracy of 62.5% reception in some versions of ie (like in 10), which in general does not deserve attention.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question