Entrar Ainda não tem acesso?
11
respostas

Dúvida conversão utilizada nas perguntas e respostas

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

por Marcos Borges
| 38.7k xp | 40 posts

Olá tudo bem? essa primeira aula do segundo curso de HTML5 + CSS3 bugou muito minha mente e estou demorando pra entender o aluno Carlos Alberto Pereira Junior teve as mesmas dúvidas que eu tenho no momento e ela foi respondida parcialmente nesse link aqui:

https://cursos.alura.com.br/forum/topico-conversao-de-px-para-em-ex-8-aula-1-html-e-css-ii-21776

Porém o instrutor Leandro Souza respondeu como é feita as conversões (uma excelente resposta por sinal) mas não respondeu outras dúvidas do aluno Carlos que eu também tenho curiosidade no momento que é:

1) como chegou aos 300% e consequentemente a padding 2rem / border-bottom 5 rem? nessa parte qual foi o valor utilizado pra determinar o rem 20px não bate e 16 fica o valor mais próximo mas não exato.

2) Porque no segundo as medidas são baseadas em 1 em = 20px e no terceiro caso 1 em = 16px?

Muito obrigado amigos e espero entender isso pra poder avançar no curso.

11 respostas
por Arthur Franco Ferreira
| 270.3k xp | 332 posts
Senior Software Maintenance Engineer

Oi, Marcos.

Vou tentar ajudar você aqui. Acho que dá para responder as duas perguntas com uma resposta. Não sei se você chegou a ver o texto que tem na explicação desse capítulo além do vídeo:

https://cursos.alura.com.br/course/avancando-html-css/task/6106

O resumo ajuda bastante no conceito:

  • rem: tem como padrão a fonte do navegador;
  • em: tem como padrão a fonte do elemento pai;
  • ch: tem como base a largura do caractere zero da fonte usada;
  • % (Porcentagem): tem como base ou a largura do elemento pai ou o font-size do elemento anterior.

Com essa explicação, a sua primeira pergunta respondendo o valor do rem é por causa do tamanho da fonte do navegador, onde o padrão é 16px (mas pode ser alterado!).

A segunda pergunta também é respondida, pois o valor do em vai ser em relação à fonte do elemento pai. Nos dos exemplos citados na outra resposta, os tamanhos são diferentes, não? Não tenho o resto do código para confirmar, mas eu acredito que sejam diferentes, por isso o comportamento diferente de tamanho para o em.

Ajudou?

OBS: O rem pode usar tanto a configuração do navegador quanto o font-size do HTML (não do body!). Tanto é que é melhor excluirmos o font-size do body para que toda declaração de rem faça sentido.

por Artur Diniz Adam
| 100.4k xp | 155 posts
Alura Scuba Team Desenvolvedor e Instrutor

Oi Marcos,

Fiz os exemplos aqui.

No primeiro exemplo o font-size da tag <html> é 20px, assim, 1rem será sempre 20px. O border-bottom era de 10px que é 1/2 do font-size da tag <html>, ou seja , 0.5rem. A confusão vem no padding: 2rem. Para obter a mesma proporção do exemplo em px, ele (o padding) precisaria ter 1.25rem. Note como eles ficam com tamanhos diferentes no exemplo. O padding com 2rem fica maior do que os 25px anteriores mesmo.

No segundo exemplo, deixamos de usar o rem e passamos a usar o em. Isso significa que não olhamos mais para o font-size da tag <html> e sim para o font-size do próprio elemento. Como não há um font-size definido pra ele no nosso CSS, ele vai usar um font-size: inherit como padrão. Isso significa que o elemento está olhando para o font-size do pai para definir o próprio font-size! O elemento pai dessas tags <div> é o <body> que também não tem font-size definido e assim pega o valor do seu pai que é o <html>. Em resumo, 1em no segundo exemplo corresponde a 20px porque nenhum font-size foi definido nele ou em seus parentes.

No terceiro exemplo continuamos a usar o em, porém, o que acontece agora é que temos um font-size: 24px que foi convertido para font-size: 1.25em que vira 25px no fim, um pouco maior mesmo. Nesse terceiro exemplo fica bem evidente que o que conta pro em é o font-size do próprio elemento. Quando fazemos margin: 1em estamos dizendo que ela tem o tamanho da fonte do elemento, que no caso é 1.25em ou 25px.

Mesmo com a fonte maior, podemos manter as proporções que tínhamos no exemplo em px, independentemente do tamanho da fonte . Temos que analisar o exemplo em px. Um padding: 8px corresponde a um padding com 1/3 do tamanho da fonte que é 24px. Da mesma forma, uma margin: 16px corresponde a uma margin com 2/3 do tamanho da fonte. Um conversão que mantenha as proporções seria padding: 0.33em e margin: 0.66em. Independentemente do font-size teríamos sempre a mesma proporção.

Fiz um outro exemplo que pode ajudar. Nele mantenho todas as proporções na conversão.

por Marcos Borges
| 38.7k xp | 40 posts

Olá Arthur Franco tudo bem? vou ler mais os resumos nas próximas vezes acabo subestimando o conteúdo achando que é igual ao vídeo que acabei de assistir, mas as vezes no resumo detalhes são melhores explicados. Obrigado pela sua explicação.

por Arthur Franco Ferreira
| 270.3k xp | 332 posts
Senior Software Maintenance Engineer

Que nada. O meu xará foi muito mais específico e detalhista que eu na explicação rs.

Ajudou com a dúvida? Conseguiu entender?

por Marcos Borges
| 38.7k xp | 40 posts

Eu to lendo e relendo a explicação do seu xará aqui e minha cabeça está explodindo rssssssss, estou quase entendendo minhas dúvidas hehehehe

por Marcos Borges
| 38.7k xp | 40 posts

Olá Artur Diniz tudo bem? primeiramente muito obrigado pela atenção e por ter criado um exemplo excelente para me explicar, você praticamente DESENHOU e explodiu minha cabeça rssssss

Estou quase 100% com as dúvidas solucionadas, pior que no terceiro exemplo, não tinha enxergado o fonte-size 24px, por isso que tudo se baseou no calculo de 16px e não 20px, sua explicação foi matadora nessa parte rssss.

Alguns elementos ficaram maior de propósito na hora de converter, por isso acabei me confundindo, porque nesse momento você acaba querendo seguir o exemplo a risca na hora de converter.

Só me esclareça um ponto por favor, no exemplo que você utilizou, você colocou uma tag:

html { font-size: 20px; },

Dessa forma ficou muito mais fácil de compreender, mas no vídeo o instrutor usa font-size: 200%; e depois muda pra 120% bem no finalzinho

Então quando mexe por porcentagens ao invés de px a conversão fica assim?

100% = 16px, 120% = 20px, 200%= 32px,

(No vídeo o instrutor colocou grande de propósito pra exemplificar mas depois voltou pro tamanho que queria de 120% que é igual 20px?)

Confere produção?

por Arthur Franco Ferreira
| 270.3k xp | 332 posts
Senior Software Maintenance Engineer

Haha. Blz. Qualquer novidade fala. Quando conseguir entender, marque uma resposta como solução.

por Marcos Borges
| 38.7k xp | 40 posts

ok ;)

por Júlio Barreto
| 211.4k xp | 93 posts
CEO

Afinal de contas, as conversões estão equivocadas no texto? Se eu for acompanhar o texto por si só, tudo bem. Mas quando tento encontrar sentido nas conversões é que o bicho pega.

por Arthur Franco Ferreira
| 270.3k xp | 332 posts
Senior Software Maintenance Engineer

Olá, Júlio!

A explicação tanto do vídeo, quanto do texto, não estão erradas não. Note que tanto na minha resposta, quanto a do meu xará, usamos a própria explicação do vídeo/texto. Só complementamos com mais informações.

por Marlon Souza
| 112.1k xp | 50 posts

Um colega postou em outro tópico, achei muito didático, leia umas três vezes e assista a aula novamente.

rsrs

https://tableless.com.br/unidade-pixels-em-rem/