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

Não estou entendendo a conversão do px para rem

.titulo-principal { text-align: center; background-color: #851944; color: #FFF; padding: 25px; border-bottom: 10px solid #000; } 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: 1.25rem; border-bottom: .5rem solid #000; }

Neste caso de onde ele tirou por exemplo que o padding corresponde a 1.25 rem? Como ele chegou neste resultado, por exemplo 10px equivale a 0.5 rem? Como chegar neste resultado para as outras medidas?

3 respostas
solução!

Olá Willy, tudo bem? O REM pega sempre o valor do root (o body ou o html) para calcular a medida. Por exemplo:

body{
font-size: 20px;
}

p{
//font-size: 25px;
font-size: 1.25rem;
}

Para chegar no resultado é só fazer: O valor que você quer/valor do root. Ex: 25/20 = 1.25

Entendi valeu muito obrigado

Se você não passar nem um valor como root. Então o browser pega o valor 16px como padrão.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software