Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Duvida

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Pixels? e atividade Começando o curso

por Igor Vieira
| 81.9k xp | 26 posts

Ainda estou meio confuso quanto a essa questão de rem, em, px e %.

bem, aqui no exemplo abaixo de vocês:

body {
    font-family: "Crimson Text", "Times New Roman", serif;
    background-color: #F2FFFC;
    font-size: 120%;
    line-height: 1.5;
}
h1 {
    text-transform: uppercase;
    font-size: 3em;
}

/* ESTE 'EM' ESTÁ RELACIONADO COM QUE VALOR? */

.titulo-principal {
    text-align: center;
    background-color: #851944;
    color: #FFF;
    padding: 2rem;
    border-bottom: .5rem solid #000;
}
/* OS 'REM' ESTÃO RELACIONADOS COM QUE VALOR? */

.subtitulo-texto {
    font-size: 1.5em;
    clear: both;
}
/* E ESTE 'EM'?*/
4 respostas
por Sérgio Lopes
| 604.1k xp | 913 posts
Instrutor CTO na Alura

O em ta sempre relacionado ao elemento pai dele. E assim por diante. Vc precisa multiplicar os valores ate chegar no <html> - que, se não tiver nada configurado, costuma ter valor de 16px.

A porcentagem em font-size é exatamente a mesma coisa que em. Trocar 120% por 1.2em dá na mesma.

Já o rem é sempre relativo ao <html> - que, de novo, tem padrão 16px na maioria dos casos.

Então, nos 3 casos que vc perguntou:

1) Multiplica o font-size do h1 até o pai: h1 * main * body * html

Logo: 3em (h1) * 100% (default main) * 120% (body) * 16px (html)

Isso dá: 57,6px

2) Esses rem é mais fácil, só multiplicar pelo 16px do html. Então fica padding de 32px e border de 8px.

3) Precisa multiplicar pelos pais de novo, então:

.subtitulo-texto * .post-blog * .container * main * body * html

Como só o body e o subtitulo-texto mexem no font-size, fica mais fácil: 1.5em * 120% * 16px = 28,8px

por Igor Vieira
| 81.9k xp | 26 posts

Entendi.

Entao, se eu declaro no meu html que o font-size tem 200%. Como fica essa estrutura ?

1 rem equivale a 200%?

e 1em ?

por Igor Vieira
| 81.9k xp | 26 posts

no meu html

solução!
por Sérgio Lopes
| 604.1k xp | 913 posts
Instrutor CTO na Alura

se vc fizer html { font-size: 200%; } isso siginifica que a fonte base agora vale o dobro do padrão de 16px, logo 32px.

Então 1rem == 32px.

E 1em vai depender da estrutra do html (precisa ir multiplicando os pais até chegar no html cujo tamanho agora é 32px)