2

Estou estudando layout responsivo e já sei que para criar uma parte flexível é necessário usar medida relativa como Em e %. Mas ainda não consegui entender qual a diferença real entre um e outro...

...e se é possível chegar ao mesmo resultado usando apenas % e não ter problemas.

2 Respostas 2

3

As unidades em e ex são relativas ao tamanho da fonte. ex é a altura do "x" minúsculo, e em é simplesmente o "tamanho da fonte" (o nome da unidade vem historicamente de 'a largura do "M" maiúsculo', mas essa definição não é usada no CSS).

Exemplo de ex

Dessa forma, se você possui um elemento que precisa ser proporcional a um corpo de texto (digamos, uma caixa com texto dentro, de modo que o texto nunca saia da caixa quando a fonte aumenta ou sobre espaço quando a fonte diminui) então o em - ou mais raramente o ex - é indicado.

Já o % é proporcional às dimensões do elemento pai, de modo que se o que você quer é por exemplo que um elemento ocupe 80% do espaço disponível, e outro os 20% restantes, essa unidade é indicada. Há ainda as unidades vw, vh, vmin e vmax que são proporcionais à tela inteira (independentemente da hierarquia de elementos), e que também podem ser usadas para especificar o tamanho da fonte (não se pode definir o font-size em %).

1

Aqui explica a diferença entre todas as métricas do CSS.

EM

Unidades de valores EM são as mais complicadas de se trabalhar. Ela é abstrata e arbitária. Aqui tem um exemplo, 1em é igual ao tamanho atual da fonte do elemento em questão, ou seja, se você ainda não definiu tamanho de fonte em lugar algum na página, então ele vai automaticamente pegar o tamanho de fonte padrão do browser, que provavelmente é 16px. Então, define-se que por padrão 1em = 16px. Digamos que você defina na tag body { font-size:20px } então o 1em passará a ser 20px. Assim que ele funciona.

Outro exemplo: Se você criar uma tag h1 { font-size: 2em; }, o tamanho do H1 em px vai ser 32px caso você não tenha definido algum valor ainda no css.

Porcentagem %

Porcentagem assim como o nome diz trabalha com percentual de valor. Se um pai tiver o tamanho de 20px, e você definir o filho com font-size:50% ele terá o tamanho de 10px.

O porcentual é muito bom para trabalhar com as ferramentas de crescer e decrescer o tamanho na página do texto.

2
  • Sendo assim quando é vantajoso usar em? E da pra usar % no layout inteiro e obter resultado satisfatório?
    – ropbla9
    Commented 1/12/2014 às 17:52
  • 1
    Não é questão de ser vantajoso. Você deve escolher a metrica que melhor adeque a sua estrutura de layout. Dá sim para usar % e ter um resultado legal, isso depende de quem irá montar a página. Commented 1/12/2014 às 17:57

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 .