Unidade de medida de CSS: REM x EM

O Pixel é a unidade de medida do CSS mais usada, praticamente usamos tudo em pixels. Outra unidade que estamos acostumados é o EM, novas medidas modernas estão surgindo como o REM.

O pixel ainda é a medida mais usadaPrimeiramente vale relembrar sobre o EM, medida que é definida pelo tamanho do font-size atual, ou seja, se você definir o tamanho da fonte do elemento </body> , o valor dos elementos filhos do body em EM serão os mesmos do pai.

 

HTML

<body>
    <div class="main">Teste</div>
</body>

CSS

body {
    font-size: 14px;
}
 
div {
    font-size: 1.2em; // calculado como 14px * 1.2, ou 16.8px
}

 

A div terá um font-size de 1.2em, ou seja, 1,2 vezes o tamanho da fonte do body — neste caso, 14px.

O resultado será 16.8px.

O que aconteceria se tivermos vários elementos aninhados?

<body>
    <div>
        Teste 1<!-- 14 * 1.2 = 16.8px -->
        <div>
            Teste 2 <!-- 16.8 * 1.2 = 20.16px -->
            <div>
                Teste 3 <!-- 20.16 * 1.2 = 24.192px -->
            </div>
        </div>
    </div>
</body>

Embora, seja necessário em alguns casos, algumas vezes gostaríamos de garantir que todos os elementos tenham uma mesma unidade de medida. Neste caso, sugerimos o REM – Root EM, cujo tamanho da fonte dos filhos são fixados no pai.

html {
    font-size: 14px;
}
 
div {
    font-size: 1.2rem;
}

Nesse exemplo para todas as DIVs o tamanho da fonte será fixado em 16.8px.

REM é muito bom para grids, pois todos os elementos tem como base o sistema do elemento raiz!

Compartilhe...Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedIn

Newsletter

Fique por dentro das nossas Novidades, assine nossa Nesletter!

O RP agradece, em breve você receberá nossas novidades.