What in and of rem use the html or body tags as a reference?

Question

What in and of rem use the html or body tags as a reference?

Navigation

#1 by (2 votes)

1

Reading about, I saw places saying that the In and Rem measures use the html tag as a reference others saying that it is the body tag, but which really is the tag that is used as a reference?

html navegador pixels

asked by anonymous 01.05.2016 / 16:30

1 answer

Convert String to Double while maintaining content How do I get the size of the window resized by the user?

score 2 · Accepted Answer

The rem is based on html , if the document is HTML

According to W3C :

Meaning:

unit rem: Equals the computed value of the root element font size.

And, according to MDN :

rem: This unit represents the font-size of the root element (eg the font-size of the element).

That is,

rem: This unit represents the font size of the root element (for example, the font size of the element)

To understand why HTML is mentioned in "for example", we have to remember that CSS can be used with other document types.

In the specific case of an HTML document, the root is just the <html> , which in turn contains <head> and <body> , and all other items. So, the "document root" is synonymous for <html> in HTML documents, so rem is based on the size of the <html> source.

The `em` is based on the value inherited by the source of the element

Still in the MDN link above, we have:

in: This unit represents the calculated font-size of the element. If used on the font-size property itself, it represents the inherited font-size of the element.

That is,

en: This unit represents the calculated font size of the element. If used in the font size itself, it is based on its inherited size.

Simply put, what happens with em is basically the following:

If you specify a font size to be 2em , it will be twice the size you would normally have if you did not specify anything. An example of using em is this (but do not limit yourself to that, the possibilities are much more than these):

.reais span {font-size:.6em}
.tamanho1 {font-size:13px}
.tamanho2 {font-size:20px}
.tamanho3 {font-size:30px}

<div class="tamanho1 reais"><span>R$</span>29<span>,90</span></div>
<div class="tamanho2 reais"><span>R$</span>29<span>,90</span></div>
<div class="tamanho3 reais"><span>R$</span>29<span>,90</span></div>

Note that in this case, we use em only to set the lowest source of R $ and cents. The em will always be .6 of the main font, without our having to worry about the size of the line.

On the other hand, if you specify the measure of an element with em , this measure will be relative to the source of the element itself. See the em applied to the size of an icon, for example:

.icon {
  background:url(http://lorempixel.com/200/200) no-repeat 0 0;
  background-size:1em 1em;
  padding-left:1.5em;
  line-height:1em;
  margin-bottom:5px;
}

.tamanho1 {font-size:13px}
.tamanho2 {font-size:20px}
.tamanho3 {font-size:30px}

<div class="tamanho1 icon">Ícone ajustado</div>
<div class="tamanho2 icon">Ícone ajustado</div>
<div class="tamanho3 icon">Ícone ajustado</div>

Note that in this case with a setting, the icon adjusts to the line size, accompanying the font. Because we use em in your measurements, who determines the size of the icon is the source.

What in and of rem use the html or body tags as a reference?

1 answer

The em is based on the value inherited by the source of the element

See also:

The `em` is based on the value inherited by the source of the element