Você pode ter chegado a termos com o uso flexível de unidades de medida, mas você ainda pode não entender quando usar rem e quando usar em. Este tutorial vai ajudá-lo a descobrir!

ambos eme rem são unidades flexíveis e escaláveis que são traduzidas pelo navegador em valores de pixels, dependendo da configuração do tamanho da letra no seu desenho. Se você usar um valor de 1em ou 1rem, que poderia se traduzir no navegador, como qualquer coisa de 16px160px ou de qualquer outro valor.

On the other hand px values are used by the browser as is, so 1px will always display as exactly 1px.

Tente o controle deslizante sobre este CodePen exemplo para ver como o valor de rem e em unidades pode traduzir-se em diferentes valores de pixel, enquanto que definir explicitamente px unidades estadia de tamanho fixo:

A Grande Questão

Usando a tag em e rem unidades nos dá flexibilidade em nossos projetos, e a capacidade de dimensionar elementos para cima e para baixo, em vez de ser preso com tamanhos fixos. Podemos usar esta flexibilidade para tornar os nossos projetos mais fáceis de ajustar durante o desenvolvimento, mais ágeis, e para permitir que os usuários do navegador para controlar a escala geral de sites para a máxima legibilidade.

Os em e rem unidades oferecem essa flexibilidade de trabalho e de formas semelhantes, então a grande questão é, quando devemos usar em valores e quando devemos usar rem valores?

Diferença Crucial

A diferença entre em e rem unidades é como o navegador determina o px valor que eles se traduzem. Compreender esta diferença é a chave para determinar quando usar cada unidade.

vamos começar por rever como as unidadesrem eem as unidades funcionam desde o início para se certificar de que conhece todos os detalhes. Em seguida, vamos seguir para a razão pela qual você deve usar em ou rem unidades.

finalmente vamos olhar para a aplicação prática de exatamente quais os elementos de um design típico que você deve usar cada tipo de unidade.

Como rem Unidades de Traduzir para os Valores de Pixel

Ao usar rem unidades, o tamanho do pixel eles traduzem depende do tamanho da fonte do elemento raiz da página, por exemplo, o html elemento. O tamanho da fonte de raiz é multiplicado pelo número que estiver a usar com a sua unidaderem.

Por exemplo, com um elemento de raiz de tamanho de tipo de letra 16px10rem equivale a 160px, i.e. 10 x 16 = 160.

Como em Unidades de Traduzir para os Valores de Pixel

Ao usar em unidades, o valor do pixel acabar com é a multiplicação do tamanho da fonte no elemento de estilo.

For example, if a div has a font size of 18px10em would equate to 180px, i.e. 10 x 18 = 180.

Important to Know:

é um equívoco bastante difundido de queem unidades são relativas ao tamanho da fonte do elemento-mãe. De fato, de acordo com a especificação W3, eles são relativos ao tamanho da fonte “do elemento no qual eles são usados”.

os tamanhos de letra do elemento-mãe podem fazer efeito em valores, mas quando isso acontece é apenas por causa da herança. Vamos dar uma olhada no porquê, e ver como isso funciona em ação.

o efeito da herança nas unidades em

trabalhando comem as unidades podem começar a ficar complicadas quando se trata de herança, porque cada elemento automaticamente herda o tamanho da fonte de seu pai. O efeito da herança só pode ser superado definindo explicitamente um tamanho de letra com uma unidade não sujeita a herança, como px ou vw.

O tamanho da fonte do elemento no qual são utilizadas unidades em determina o seu tamanho. Mas esse elemento pode ter herdado um tamanho de fonte de seu pai, que herdou um tamanho de fonte de seu pai, e assim por diante. Como tal, é possível que qualquer valorem seja efetuado pelo tamanho da fonte de qualquer dos seus pais.vejamos um exemplo. Sinta-se à vontade para experimentar isto em CodePen para si mesmo enquanto atravessamos. À medida que avança, use ferramentas de desenvolvimento do Chrome ou Firebug para o Firefox para inspecionar os valores dos pixels em que as nossas unidadesem são calculadas.

Exemplo de em Herança

Se temos uma página com uma raiz de tamanho de tipo de letra 16px (geralmente o padrão) e uma criança div dentro dela, com estofamento de 1.5em, que div herdarão o tamanho da fonte 16px a partir do elemento raiz. Assim, seu estofamento se traduzirá para 24px, ou seja, 1,5 x 16 = 24.

então e se envolvermos outro div em torno do primeiro e definir o seu font-sizepara 1.25em?

a Nossa wrapper div herda a raiz da fonte tamanho de 16px e multiplica-se que, pelo seu próprio font-size configuração de 1.25em. Isto define o div para ter um tamanho de letra de 20px, ou seja, 1,25 x 16 = 20.

Agora o nosso div original não está mais herdando diretamente do elemento raiz, em vez disso está herdando um tamanho de letra de 20px do seu novo div pai. Seu valor de enchimento de 1.5em agora equivale a 30px, i.e. 1.5 x 20 = 30.

Este efeito de escala pode ser agravado ainda mais se adicionarmos um em Tamanho de letra baseado no nosso div original, digamos 1.2em.

o div herda o20px Tamanho de letra do seu pai, então multiplica isso por seu próprio1.2em, dando-lhe um novo tamanho de letra de 24px, ou seja, 1.2 x 20 = 24.

O1.5em enchimento no nosso div irá agora mudar de tamanho novamente com o novo tamanho da fonte, desta vez para36px, ou seja, 1,5 x 24 = 36.

Finalmente, para ilustrar ainda mais que em unidades são em relação ao tamanho da fonte do elemento que estiver a utilizar, (não o elemento principal), vamos ver o que acontece com o nosso preenchimento de 1.5em se a gente definir explicitamente a div para utilizar um tamanho de tipo de letra 14px, um valor não sujeito a herança.

agora, nosso estofamento caiu para 21px, ou seja, 1,5 x 14 = 21. Ele não é afetado pelo tamanho da fonte do elemento pai.

com todo este potencial de complicação, você pode ver por que é importante saber como usar em unidades de uma forma gerenciável.

o efeito da configuração do navegador no tamanho da letra do elemento HTML

pelos navegadores predefinidos normalmente têm um tamanho de letra de 16px, mas isto pode ser alterado para qualquer lugar de 9px para 72px pelo utilizador.

Importante Saber:

a raiz html o elemento herda o seu tamanho de letra das configurações do navegador, a menos que seja substituída por um valor fixo explicitamente definido.

assim, enquanto o tamanho da letra no elementohtml é o que determina directamenterem, esse tamanho de letra pode ter vindo primeiro da configuração do navegador.

assim, a configuração do tamanho da fonte do navegador pode afetar o valor de cadarem unidade usada em um projeto, bem como cadaem unidade via herança.

efeito de configuração do navegador quando nenhum tamanho de letra HTML é definido

a menos que seja substituído, o elemento html herdará qualquer que seja a configuração padrão do tamanho de letra no navegador. Por exemplo, vamos tomar um site onde não font-size propriedade é definida em html elemento.

Se um utilizador tiver o seu navegador com o tamanho de letra por omissão de 16px, o tamanho de letra de raiz será de 16px. Nas Ferramentas de desenvolvimento do Chrome, poderá ver o que um elemento herdou ao verificar mostrar as propriedades herdadas na página computada.

neste caso 10rem equivale a 160px, i.e. 10 x 16 = 160.

Se o utilizador aumentar o seu tamanho de letra do navegador até 18px, o tamanho de letra raiz torna-se 18px. Agora 10rem traduz para 180px, i.e. 10 x 18 = 180.

Configuração do Navegador Efeito em Unidade de HTML Tamanho da Fonte

Quando um em baseado tamanho da fonte é definido no html elemento, o valor do pixel que se traduz vai ser um múltiplo do navegador configuração de tamanho de fonte.

Por exemplo, se o elemento do site html tivesse um elementofont-size propriedade definida para1.25em, o tamanho da fonte de raiz seria 1,25 vezes o tamanho da letra do navegador.

Se o tamanho da letra do navegador foi definido para 16px, o tamanho da fonte raiz sairia como 20px, ou seja, 1,25 x 16 = 20.

neste caso 10rem seria igual a 200px, por exemplo, 10 x 20 = 200.

no Entanto, se o navegador tamanho da fonte foi definido para 20px, a raiz de tamanho de fonte, ao invés de traduzir para 25px, i.e. 1, 25 x 20 = 25.

10rem seria igual a 250px, i.e. 10 x 25 = 250.

Resumindo em vs. rem Diferença

o Que tudo o que acima se resume a isso:

• a Tradução de rem unidades ao valor do pixel é determinado pelo tamanho do tipo de letra de html elemento. Este tamanho de letra é influenciado pela herança da configuração do tamanho de letra do navegador, a menos que explicitamente sobreposta com uma unidade não sujeita a herança.

• tradução deem unidades para valores de pixels é determinado pelo tamanho da fonte do elemento em que são usados. Este tamanho de letra é influenciado pela herança de elementos-mãe, a menos que explicitamente sobreposta com uma unidade não sujeita a herança.

por que utilizar unidades rem:

the greatest power that rem units offer is not just that they give consistent dimensing regardless of element inheritance. Em vez disso, é que eles nos dão uma maneira de ter as configurações de tamanho de letra do usuário influenciar cada aspecto único do layout de um site, usando rem unidades onde costumávamos usar px unidades.

Por esta razão, o objectivo principal do uso de unidadesrem deve ser garantir que qualquer tamanho de letra padrão a que um utilizador tenha o seu navegador definido, a disposição irá ajustar-se para acomodar o tamanho do texto dentro dela.

um site pode ser projetado inicialmente focando-se no tamanho de letra padrão mais comum do navegador 16px.

Mas usando rem unidades, se um usuário aumenta o tamanho da letra, a integridade do layout serão preservados, e o texto não ficar esmagado em uma rígida espaço destinado para texto menor.

E se o usuário diminui o tamanho do tipo de letra, todo o layout escalas para baixo, e eles não serão deixados com um pequeno punhado de texto em um terreno baldio de espaço em branco.

os Utilizadores de alterar as configurações de tamanho da fonte para todos os tipos de razões, de tensas visão para escolher as definições ideais para os dispositivos que podem ser muito diferentes em tamanho e distância de visualização. Acomodar essas configurações permite experiências de usuário muito melhores.

importante saber:

Alguns designers use rem a partir de layouts em conjunto com um fixo px unidade font-size definição html elemento. Isto é tipicamente feito de modo que uma mudança de tamanho da fonte no elemento html pode escalar globalmente o desenho para cima ou para baixo.

desaconselho fortemente esta opção, uma vez que se sobrepõe ao tamanho da letra o elemento html herda da configuração do navegador do utilizador. Assim, isso impede que as configurações tenham qualquer efeito, e remove a capacidade do usuário de otimizar para melhor visualização.

Se você quiser mudar o tamanho do tipo de letra html elemento, faça isso com um em ou rem valor como a raiz tamanho do tipo de letra vai ser um múltiplo do navegador do usuário configuração de tamanho de fonte.

isto ainda lhe permitirá escalar o seu desenho para cima ou para baixo, alterando o seu html o tamanho da letra do elemento, mas irá preservar o efeito da configuração do navegador do utilizador.

Por que Usar em Unidades

O valor da chave em unidades da oferta é que eles permitem o dimensionamento de valores a ser determinado por um tamanho de tipo de letra diferente de html elemento.

Por esta razão, o objectivo principal de em unidades deve ser permitir a escalabilidade no contexto de um elemento de projecto específico.

Por exemplo, você pode definir o paddingmargin e line-height em torno de uma navegação de menu item de usar em valores.

Desta forma, se você alterar o menu do tamanho de tipo de letra, o espaçamento em torno de itens de menu será dimensionado proporcionalmente, de forma independente do resto do layout.

Na seção anterior, sobre a herança, você viu como rapidamente para manter o controle de em unidades pode ficar fora de mão. Por esta razão, eu recomendo apenas usandoem unidades se você identificar uma clara necessidade para eles.

aplicação prática

pode haver algum debate entre web designers e estou certo de que diferentes pessoas têm diferentes abordagens preferidas, no entanto a minha recomendação é a seguinte.

Use unidades em para:

qualquer dimensionamento que deve escalar dependendo do tamanho da fonte de um elemento que não a raiz.

Geralmente falando, a única razão pela qual você precisa usar em unidades é escalar um elemento que não tem Tamanho de letra padrão.

de acordo com o nosso exemplo acima, os componentes de design como itens de menu, botões e cabeçalhos podem ter os seus próprios tamanhos de letra explicitamente declarados. Se alterar estes tamanhos de letra, deseja que o componente inteiro seja dimensionado proporcionalmente.

propriedades Comuns a presente orientação será aplicada para são marginpaddingwidthheight e line-height configurações e, quando usado em elementos não padrão de dimensionamento de fonte.

eu recomendo que quando empregamos em unidades de letra, o tamanho do elemento e são utilizados em deve ser definida em rem unidades para preservar a escalabilidade, mas evite herança confusão.

, Normalmente, não Use em Unidades para Tamanhos de Fonte

É muito comum ver em unidades utilizadas para o dimensionamento da fonte, especialmente em títulos, no entanto, eu gostaria de sugerir que os projetos são mais gerenciáveis se rem unidades são normalmente utilizados para o dimensionamento da fonte.

os títulos de razão geralmente usamem unidades é que eles são uma escolha melhor do quepx unidades, sendo relativo ao tamanho de texto regular. No entantorem unidades podem alcançar este objetivo igualmente bem. Se for feito qualquer ajuste de tamanho de letra no elementohtml, os tamanhos de cabeçalho também irão escalar.

tente alterar o em tamanho da letra no html elemento neste CodePen para ver por si próprio:

mais frequentemente do que Não, Não queremos que os nossos tamanhos de letra sejam dimensionados com base em qualquer elemento que não seja a raiz, com apenas algumas excepções.

um exemplo onde podemos querer em dimensionamento de tipos de letra baseado pode ser um menu, onde temos o item de segundo nível do menu Texto dimensionado, dependendo do tamanho da letra do primeiro nível. Outro exemplo pode ser um ícone de tipo de letra usado dentro de um botão, onde o tamanho do ícone deve se relacionar com o tamanho de texto do botão.

no Entanto, a maioria dos elementos em um web design tendem a não ter esse tipo de exigência, então você geralmente deseja usar rem unidades para dimensionamento da fonte, com em apenas unidades onde especificamente necessário.

utilize unidades rem para:

qualquer dimensionamento que não necessite de em unidades pelas razões descritas acima, e que deverá escalar dependendo da configuração do tamanho da fonte do navegador.

isto explica quase tudo num desenho padrão, incluindo a maioria das alturas, a maioria das larguras, a maioria dos estofos, a maioria das margens, larguras de contorno, a maioria dos tamanhos de letra, sombras, basicamente quase todas as partes do seu layout.

In a nutshell, everything that can be made scalable with rem units, should be.

Tip

ao criar layouts é muitas vezes mais fácil pensar em pixels, mas saída em rem unidades.

pode ter pixels para rem cálculos feitos automaticamente através de um pré-processador como o Stylus / Sass / Less, ou um pós-processador como o PostCSS com o ‘plugin’ PXtoRem.em alternativa, pode usar o PXtoEM para fazer manualmente as suas conversões.

Use Sempre o rem Consultas de Mídia

Importante, quando se usa rem unidades para criar um uniforme escalável design, suas consultas de mídia também deve ser rem unidades. Isto irá garantir que qualquer que seja o tamanho de letra do navegador de um utilizador, as suas consultas multimédia irão responder a ele e ajustar o seu layout.

por exemplo, se um utilizador escalar o texto muito alto, a sua disposição poderá precisar de passar de duas colunas para uma única coluna, tal como pode acontecer num dispositivo móvel mais pequeno.se os seus pontos de paragem estiverem em larguras fixas de pixels, só um tamanho diferente da área de visualização os poderá despoletar. No entanto, comrem pontos de paragem baseados, eles irão responder a diferentes tamanhos de letra também.

não utilize em ou rem para:

Multi Layout de Coluna Larguras

as larguras de Coluna em um layout normalmente deve ser % base para que eles possam fluidez ajuste de forma imprevisível tamanho viewports.

no entanto, colunas individuais ainda devem geralmente incorporar valores rematravés de uma configuraçãomax-width.

Por exemplo:

.container { width: 100%; max-width: 75rem;}

isto mantém a coluna flexível e escalável, mas impede que se torne demasiado larga para que o texto nela seja facilmente legível.

quando um elemento deve ser estritamente ilegível

num design web típico não haverá muitas partes do seu layout que não possam ser projetadas para escalabilidade. No entanto, ocasionalmente você vai encontrar elementos que realmente precisam usar valores fixos explícitos para a finalidade de evitar a escala.

a condição prévia para empregar valores de dimensionamento fixos deve ser que se o elemento em questão fosse dimensionado ele iria quebrar. Isso realmente não vem à tona muitas vezes, então antes que você seja tentado a expulsar aquelas unidades px, pergunte a si mesmo se usá-las é uma necessidade absoluta.

encerrando

vamos ter uma recapitulação rápida do ponto de bala do que cobrimos:

• rem eem as unidades são calculadas em valores de pixels pelo navegador, com base nos tamanhos de letra do seu desenho.
• em as unidades são baseadas no tamanho da fonte do elemento em que são usadas.
• rem as unidades são baseadas no tamanho da fonte do elementohtml.
• em as unidades podem ser influenciadas pela herança do tamanho da letra de qualquer elemento pai

• rem as unidades podem ser influenciadas pela herança do tamanho da letra a partir da configuração da fonte do navegador.

• Useem unidades para dimensionamento que deve escalar dependendo do tamanho da fonte de um elemento que não a raiz.
• Use remunidades para dimensionamento que não necessita deem unidades, e que devem escalar dependendo da configuração do tamanho da letra do navegador.
• Userem unidades, a menos que tenha a certeza de que precisa deem unidades, incluindo o tamanho das fontes.
• Use rem unidades em consultas de mídia
• não usar em ou rem multi layout de coluna larguras – use % em vez disso.
• Não utilize emourem se a marcação provocaria inevitavelmente um elemento de disposição a quebrar.

espero que agora tenha construído uma imagem robusta e completa de exatamente como as unidadesem erem as unidades funcionam, e através desse saber como melhor alavancá-las em seus projetos.

eu encorajo você a tentar as Diretrizes de Uso contidas neste tutorial para si mesmo, e desfrutar da escalabilidade completa e capacidade de resposta dos layouts que lhe permitirão criar.