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

Dúvida para converter px para % e px para rem ou em

Eu estou com dúvida para converter o font-size de px para porcentagem E também de pixel para rem/em, pelo que vi a medida do rem é a mesma do em, só que depende do caso.

Fiquei na dúvida com relação ao cálculo 60px

.titulo-principal {
    font-size: 60px;
    padding: 25px;
    border-bottom: 10px solid #000;
    ....
    }

Foi alterado para...

.titulo-principal {
    font-size: 300%;
    padding: 2rem;
    border-bottom: .5rem solid #000;
}

Como chegou neste resultado, 60px para 300% e 25px para 2rem? Preciso alterar 30px para % "900%" não é pq o subtítulo fica enorme, fui colocando valores aleatórios e acabei colocando 155%, estaria certo este valor?

Um exemplo do que preciso alterar para rem:

margin: 20px 0 
width: 2000px; /*Parte 1*/
padding-bottom: 80px;/*Parte 1*/

Gostaria de saber como faço o cálculo para chegar no rem.

Deste já agradeço. (Obseração, não passa a resposta de tudo, estou enviando como exemplo)

5 respostas

Olá Shellen,

A sua pergunta é ótima, e talvez muitas pessoas tenham essa dúvida no começo, é algo que pelo menos pra mim só ficou claro com bastante prática!

As medidas em e rem se baseam no tamanho da fonte do seu projeto, e como o seu design vai ser afetado por essas medidas é um assunto um tanto completo pra te explicar somente por postagens no fórum, mas fique tranquila pois todas essas medidas serão abordadas melhores no curso de webdesign responsivo com o Sérgio Lopes! Recomendo de verdade que você assista a esse curso, e caso ainda assim não entenda, tenho certeza que pelo menos vai saber por onde começar, e ai eu mesmo espero estar no fórum na hora para lhe auxiliar!

Bons estudos

Li rapidamente algumas informações sobre o curso webdesign responsive, pelo que entendi não tem um cálculo de conversão de px para % ou px para em ou rem.

Não consegui entender muito bem, pois vou reler ainda, mas pelo que compreendi não teria um cálculo, teria que ver na tela e assim chegar a conclusao do valor que vou colocar...

Poderia considerar este cálculo?

800 width = 100% ... cada item do menu tem 70px.

800 = 100 70 = x 800x = 7000 x = 7000 / 800 x = 8,75%

Peguei de um fórum a resposta sobre os pixels que eu estava com dúvida.

Basicamente você pega o valor total em pixel definido no seu Layout adiciona 00(2 ZEROS) ao valor que queira saber a porcentagem, e divide pelo valor total do Layout.

Exemplo: O Layout tem um tamanho total de 940px. Você adicionou um elemento dentro desses 940px de tamanho 180px, ADICIONE 00(2 ZEROS) ao tamanho adicionado(180px) isto é, "180 + 00" = 18000 e divide o valor dessa "soma" pelo valor total do Layout. 18000/940 = 19%

-> Foi falado na aula que o tamanho da largura da nossa tela é de 1905, então posso posso considerar 60+00/1905 (que é a largura da nossa tela) = 3,14... porém posso considerar 300%.

Seria isso?

Caso seja isso, preciso saber como converter o px em rem ou em.

solução!

Dúvida esclarecida no link:

https://cursos.alura.com.br/forum/topico-conversao-da-classe-topico-principal-45753