Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

O uso de rem, em e ch

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Pixels? e atividade Alterando o projeto existente

por Eduardo Ungaratto
| 72.9k xp | 144 posts

E pode ficar da seguinte forma, considerando que o código havia sido desenvolvido com base num tamanho de fonte de 20 pixels:

.titulo-principal {
    font-size: 300%;
    text-align: center;
    background-color: #851944;
    color: #FFF;
    padding: 2rem;
    border-bottom: .5rem solid #000;
}

Nao entendi essa colocação, referente a estes rem's. ele nao sao relativos a 300% do font-size?

Eu havia entendido que em é aplicado em elementos, e rem seria com base no font-size da tag html ou setada pelo usuario no navegador.

Entao qual a diferença do uso de rem e em ? em nao é para elemento x e seus filhos? rem nao é para todos elementos?

E por ch, a quantidade passada será quantidade de caracteres dentro da div?

4 respostas
solução!
por Yuri Padilha
| 152.5k xp | 226 posts
Instrutor

Oi Eduardo, td bem? Então, primeiro vou explicar a diferença entre EM e REM.

EM é relativo ao font-size do pai, por exemplo:

HTML
<div style="font-size: 10px;">
    <div style="font-size: 2em;">
        <p style="font-size: 3em;">
            Mensagem aqui!
        </p>
    </div>
</div>

Como o EM é sempre relativo ao pai, temos o seguinte resultado para o tamanho de fonte das tags.

Primeira <div> -> 10px

Segunda <div> -> 10*2 = 20px

<p> -> 20*3 = 60px

Ou seja, a gente fala que o EM tem esse comportamento em cascata, ou seja, o tamanho vai sempre se multiplicando conforme o pai, entende?

Agora o REM. A letra R nesse caso significa 'root', ou seja, raíz! A raíz do HTML é a própria tag <html>. Ou seja, não existe esse comportamento de cascata, ele sempre multiplica só uma vez com relação ao tamanho do font-size do <html>

Vamos ver no exemplo de novo.

HTML
<html style="font-size: 15px;">
    <div style="font-size: 10px;">
        <div style="font-size: 2rem;">
            <p style="font-size: 3rem;">
                Mensagem aqui!
            </p>
        </div>
    </div>
</html>

primeira <div> -> 10px

Segunda <div> -> 15*2 = 30px

<p> -> 15*3 = 45px

O ch é um pouco diferente, o ch ele pega a largura da letra '0' da fonte q vc tá usando. Por exemplo:

font-size: 2ch;

Faria com que o tamanho da sua fonte fosse 2x a largura do caractere '0' dela.

Espero que tenha ajudado!

Abraço!

por Matheus Henrique Castiglioni
| 5308.1k xp | 9007 posts
Instrutor

Eduardo acredito que a resposta do nosso amigo Yuri esteja bem completa, sua dúvida foi resolvida ?

por Eduardo Ungaratto
| 72.9k xp | 144 posts

Sim, perfeita! Explanou melhor, entendi de vez :)

por Matheus Henrique Castiglioni
| 5308.1k xp | 9007 posts
Instrutor

Maravilha, qualquer dúvida não deixe de cria-la.