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

Cálculo da largura utilizando EM

Olá gente, boa tarde! Ficou tranquilo entender o método de conversão de "PX" para "EM" quando se trata de fonte. Porém fiquei com dúvida como converto de "PX" para "EM" quando se fala de "MARGIN". Qual o cálculo que vocês fazem?

Estou montando uma tela e o logo está com "MARGIN-LEFT" de 650px , como eu converto para "EM" ?

5 respostas

Olá Ricardo, tudo bem?

Uma vez utilizei a seguinte fórmula e para mim na época havia funcionado bem:

1 ÷ tamanho da fonte pai (px) × tamanho dos pixels que deseja converter = valor em

Por exemplo, assumindo o valor default da fonte pai como sendo 16px, teríamos:

1 ÷ 16 x 650 = 40.625 em

Abraços

Olá Rafael, Tudo bem e contigo? O layout tem uma área de 1080px, no lado esquerdo tem um texto e no lado direito a logo.

Na div que tem a logo, coloquei "MARGIN-LEFT: 40.625 EM" e acabou saindo da área útil.

Então utilizei o DevTools do Chrome e foi ajustando até chegar o valor da distância que foi: "margin-left: 9.22em", só que eu não queria ficar nessa sempre de "tentativa e erro" entende?

Link de exemplo http://jmp.sh/0mc7M6M

solução!

Oi Ricardo, tudo certo também obrigado

Ah entendi, no caso, você saberia se a fonte pai do seu projeto seria de 16px?

Pela imagem do link me parece ser uma fonte maior, a fonte base que eu achei mais próxima na conversão de 650px para 9.22em seria com tamanho de fonte 70px.

Vou encaminhar um link de um site que ajudou no projeto que fiz na época: http://pxtoem.com/

Espero ter ajudado!

Abraços

Olá Rafael, A fonte pai tem 68px. Vou salvar esse link no favorito, será útil. Obrigado Rafael !!!

De nada :)

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