5

Quando coloco como unidade "1em" num "font-size" para um desktop por exemplo, irá ficar 15px por padrão já do navegador. Mas o "em" vale um tamanho menor para um dispositivo mobile por exemplo, certo?

2 Respostas 2

7

EM é uma unidade de medida tipográfica.
Seu nome está relacionada com a letra “M”, onde o tamanho base dessa unidade deriva da largura da letra M em maiúscula. Dizem que 1em equivale aproximadamente 16 pontos.

O problema de utilizar fonts em EM é que elas são variáveis como a porcentagem. Diferentemente da utilização de pixels, temos de calculcar as nossas unidades no projeto.

target ÷ context = result

Um exemplo: imagine um título, H1, cujo seu tamanho de texto seja 20px.

CSS EXEMPLO ORIGINAL

       body {
         font: normal 100% verdana, arial, tahoma, sans-serif;
       }    
       div {
            font: 30px verdana, arial, tahoma, sans-serif;
        }

        h1 {
            font-size: 20px;
        }

        p {
            font-size: 12px;
        }

Então o target (que é o elemento que queremos modificar) é 20px. Nesse caso o BODY é o pai do nosso H1. Logo, o valor da font do body é o context (contexto), que como já dissemos tem o valor padrão de 16px. Logo 20 ÷ 16 = 1.25.

Imagine que quer fazer um site mobile ou um site para grandes telas.
Em vez de mudar as fonts de cada elemento, pode simplesmente muda o valor da font do target, ou seja, do body!

CSS EXEMPLO em EM

 body {font: 100% verdana, arial, tahoma, sans-serif;}

    div {
        font-size: 1.88em;
    }

    h1 {
        font-size: 0.67em;
    }

    p {
        font-size: 0.4em;
    }

div: 30/16 = 1.88
h1: 20/30 = 0.67 pois está em relação à div
P: 12/30 = 0.4 pois está em relação à div

Mudando o valor de porcentagem da font do body, consegue mudar proporcionalmente a font de todos os outros elementos.

Mas é bastante aborrecido ficar calculado o valor do target e do context para cada um dos elementos. Então foi criada outra unidade de medida chamada REM
A REM sempre terá o valor de contexto do body

Os valores do nosso exemplo acima ficaria assim se referenciando pelo body e não pelo DIV. Logo os valores ficam como abaixo:

CSS EXEMPLO em REM

  body {font: 100% verdana, arial, tahoma, sans-serif;}

    div {
        font-size: 1.88rem;
    }

    h1 {
        font-size: 1.25rem;
    }

    p {
        font-size: 0.75rem;
    }

Usamos sempre a base 16

div: 30/16 = 1.88
h1: 20/16 = 1.25
P: 12/16= 0.75

Mas atenção que alguns navegadores podem não suportar esta medida

Calculador da rem
Calculador da em
Recomendações do uso de unidades em CSS

3

Isso se da porque em é uma unidade de medida de distância relativa

Medidas relativas

Para fontes: unidades em, ex, ch, rem
Porcentagem da viewport: unidades vw, vh, vmin, vmax
A especificação do W3C classifica tecnicamente a porcentagem (%) como tipo de dado e não unidade de medida.

São baseadas em outras medidas, ou seja dependendo do dispositivo ela muda

Medidas absolutas

Unidades cm, mm, q, in, pt, pc, px

Sempre estáticas independente do dispositivo e referência

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .