Medida em - Converter px para em - CSS

A medida de tamanho relativa em é muito útil e de melhor utilização que a medida px (pixel).

Digo isso porque essa medida se adapta melhor a diferentes resoluções e também é mais fácil manipular o tamanho das fontes de todo o site.

Então vamos ver como essa medida funciona. A medida em multiplica o valor do elemento pai, ela é muito utilizada para fontes, mas pode ser utilizado para margin, padding entre outros. Então como funciona essa multiplicação? Vamos supor que temos uma div que será o container de um elemento p, conforme exemplo a seguir:


<div>
    <p>Paragrafo</p>
</div>

Agora vamos supor que a div contém uma propriedade font-size: 12px, e o elemento p contém font-size: 1em, conforme exemplo a seguir:


div {
    font-size: 12px;
}
div p {
    font-size: 1em;
}

Esse 1em, significa que será multiplicado 1 vez pelo valor do seu elemento pai, logo 12 vezes 1, equivale a 12px. Com isso em mente, se colocarmos o elemento p para font-size: 2em, isso será equivalente a 24px, porque será multiplicado 12 por 2.

Agora você me pergunta, e se caso o elemento pai não for definido um valor para a propriedade font-size? Caso isso não ocorra, que geralmente acontece, existe um valor padrão de tamanho de fontes que já vem pré-definido no navegador. Geralmente esse valor é 16px.

Então por padrão 1em equivale a 16px. Então vamos supor que nossa div do exemplo anterior não tenha sido definido nenhum valor para a propriedade font-size, logo nosso elemento p que contem a propriedade font-size com um valor de 1em será equivalente a 16px.

E se quiséssemos adicionar a metade do tamanho a mais para o elemento p? A metade de 1 é 0.5, logo 1.5em equivale ao tamanho original que no nosso caso é 16 mais a metade de 16 que é 8, ficando no total de 24, logo 1.5em equivale a 24px.

Mas muita atenção nisso! Não quer dizer que sempre 1.5em será equivalente a 24px, isso só irá acontecer se o elemento pai conter font-size: 16px. Se ao invés de 16px o elemento pai conter font-size: 12px, 1.5em de 12px equivale a 18px

Outra coisa que devemos ter uma atenção maior, é que o em multiplica sempre o valor do elemento pai, isso quer dizer que se tivéssemos uma div como container com font-size: 16px, e dentro dela tivéssemos um elemento p com font-size: 1.5em, e dentro do p um span com font-size: 2em, o que você acha que vai acontecer? Veja o exemplo a seguir:


<div>
    <p>Texto com uma palavra <span>destacada</span></p>
</div>

div {
    font-size: 16px;
}
div p {
    font-size: 1.5em;
}
div p span {
    font-size: 2em;
}

Primeiramente o elemento p terá o font-size multiplicado por 1.5 do seu elemento pai, logo 16 x 1.5 equivale a 24px, então o span que está dentro de p terá o font-size multiplicado por 24px, logo 24 x 2, equivale a 48px. Então nesse caso 2em do elemento span equivalem a 48px.

Converter px para em

A conversão de px (pixel) para em é muito simples, basta dividir o valor que você deseja pelo valor do elemento pai, exemplo, se queremos saber quanto que 12px em em equivalem referente a 16px que é o valor do elemento pai, basta dividir 12 \ 16 = 0.75, então 12px equivalem a 0.75em.

Se quiséssemos que nossa fonte do elemento filho equivalesse a 18px, e o seu elemento pai tem 16px de font-size. Basta dividir 18 por 16, 18 / 16 = 1.125em, esse número pode ser arredondado para 1.12em.

Dica: Alterar todas as fontes do site de uma vez só

Se todas as fontes do site utilizam a medida em, e por algum motivo você deseja diminuir ou aumentar todas as fontes do site, basta definir um tamanho de fonte para o elemento body:


body {
    font-size: 16px;
}

Com isso definido, o body sempre será o último elemento pai, e por causa desse último elemento pai será feito a multiplicação conforme o valor definido a ele. Exemplo, uma div como container e um p como filho, esse p tem um fonte-size: 1.5em:


<body>
    <div>
       <p>Paragrafo</p>
    </div>
</body>

p {
    font-size: 1.5em;
}

O valor desse 1.5em será equivalente a multiplicação de todos os seus elementos pai, 1.5em equivale a 24px de 16px do seu elemento pai, que nesse caso é a div, que não tem um valor definido de font-size, mas herda esse valor do seu elemento pai que é o body, assim sendo se alterarmos o font-size do body para 14px por exemplo, o tamanho da fonte do p será alterado, agora 1.5em não equivalem mais a 24px e sim será feito uma nova multiplicação, agora será 14 x 1.5 = 21, então o elemento p será equivalente a 21px.

Então somente alterando o valor do font-size do body, será alterado automaticamente todos os tamanhos de todas as fontes do site (Caso essas fontes estejam em em).

Publicidade

Gostou? Compartilhe com seus amigos!

Ícone Facebook Ícone Twitter Ícone Linkedin
Comentários

Deixe um comentário

Subir Página