Projetar um site responsivo com dimensionamento baseado em EM

Sep 16, 2025

Como

Você provavelmente já ouviu falar que você deve usar unidades relativas para o tamanho da fonte. Esta é uma boa regra para design web acessível; Se o usuário alterar o tamanho de fonte padrão do navegador, isso permite que o texto da sua página seja redimensionar de acordo. Você pode ter tomado este conselho e fez o interruptor. Talvez você tenha saído sua calculadora e converteu os tamanhos da fonte do seu site de absoluto px. unidades para EMS ou, mais provável, rems.

Mas se é onde você parou, você está perdendo muita flexibilidade e poder que o EMS traz para o navegador. A unidade EM não é simplesmente um substituto para o familiar px. ; Você pode usá-lo para mais propriedades do que apenas tamanho da fonte . Se você fizer isso, alguns de seus outros benefícios começarem a surgir.

Por consistentemente usando o EMS, você pode projetar componentes na página que responda automaticamente caso o tamanho da fonte seja alterado. Em seguida, com um truque inteligente para um tamanho de fonte responsivo, você pode produzir uma página inteira que se ajusta dinamicamente com base na largura da viewport do navegador. Deixe-me mostrar a você como alavancar o comportamento "relativo" da EMS para criar projetos que são escaláveis e responsivos.

Unidades de tamanho de fonte

Usar EMS para o tamanho da fonte pode ser complicado. O valor exato é determinado pelo tamanho da fonte herdado do elemento (i.E. o tamanho da fonte do elemento pai). Isso é complicado quando você começa a ninharias mais profundamente. Se um elemento tiver um tamanho de fonte no EMS, seu pai tem um tamanho de fonte no EMS, e seu pai ainda tem outro. Você terá que multiplicar todos esses valores para determinar o valor calculado real do elemento filho.

Isso significa que colocar o mesmo módulo em diferentes contêineres pode mudar o significado de EM. O módulo será imprevisível.

Para evitar isso, normalmente usamos uma unidade relativa diferente para o tamanho da fonte: rems. Um REM (ou 'ROOT EM') não é baseado no tamanho da fonte herdada, mas no tamanho da fonte do elemento raiz da página, & lt; html & gt; . Isso significa que seu valor é o mesmo durante toda a página. É mais previsível do que, e muitas vezes preferível, o EMS regular.

Construindo um módulo com EMS

Vamos usar unidades relativas para construir um módulo. No entanto, não vamos seguir a abordagem comum. Em vez de usar o REM para tudo, vamos usá-lo apenas uma vez: no elemento superior do módulo. Isso estabelecerá um tamanho de fonte conhecido para o módulo, em vez de ser baseado em uma cadeia imprevisível de valores de EM acima no DOM. Isso significa que podemos dimensionar facilmente o tamanho do módulo, substituindo um único valor.

Use rems on the outermost element to establish a known font size, then use ems to build based on that value — Use rems no elemento mais externo para estabelecer um tamanho de fonte conhecido e use EMS para construir com base nesse valor

Depois de estabelecermos este tamanho de fonte conhecido, estamos seguros para usar o EMS regular em todo o módulo. Usá-lo não só para qualquer tamanhos de fonte nos sub-elementos, mas também para a maioria das outras propriedades, incluindo preenchimento , margem e raio de fronteira .

Nós vamos construir um painel com um cabeçalho e um corpo. A marcação é assim:

 & lt; div classe = "painel" & gt;
  & lt; div classe = "cabeçalho de painel" & gt;
    & lt; H3 & GT; eis o poder do EMS & LT; / H3 & GT;
  & lt; / div & gt;
  & lt; div classe = "painel-corpo" & gt;
    Considere as maneiras que você pode alavancar parentes
    unidades para dimensionamento dinâmico de seus módulos.
  & lt; / div & gt;
& lt; / div & gt;

Vamos estilizar o contêiner externo. Nós vamos definir o tamanho da fonte em 1rem. para estabelecer nosso valor em seu local. Nós vamos definir o raio de fronteira usando EMS. Eu normalmente gosto de usar px para borda, no entanto, para obter uma boa linha fina.

 .panel {
  Tamanho da fonte: 1rem;
  fronteira: 1px sólido # 678;
  raio de fronteira: 0.3em;
  estouro: oculto;
}

Em seguida, estilo os elementos internos. Vamos usar o EMS para preenchimento. Em seguida, aumentaremos o tamanho da fonte do cabeçalho para 1,25 vezes nosso valor em seu local, produzindo um tamanho computado 20px.

 .panel-titing {
  preenchimento: 0.6em 1.2em;
  fundo-cor: #cde;
  border-bottom: 1px sólido # 678;
}
.panel-titing & gt; h3 {
  Tamanho da fonte: 1.25EM;
  Margem: 0;
  espaçamento de letras: 0,03EM;
}
.panel-corpo {
  preenchimento: 0.6em 1.2em;
}

Você pode multiplicar os valores de preenchimento pelo tamanho da fonte para determinar seus valores computados (9,6px verticais e 19.2px horizontais). Verdadeiramente, porém, não importa. Tente não ficar atolado com medições perfeitas pixels. Isso pode se sentir estranho, mas pressione. Quanto mais você usa o EMS, mais você se familiarizará com eles como uma unidade em seu próprio respeito.

Dimensionando dinamicamente o design

Quando criamos módulos reutilizáveis como este, muitas vezes descobrimos que precisamos de algumas variações. Digamos que queríamos criar uma versão maior. Se estivéssemos usando px para tudo, isso significaria aumentar o tamanho da fonte, o preenchimento, o raio de fronteira e assim por diante. No entanto, porque definimos tudo em relação a um tamanho de fonte REM, precisamos apenas alterar esse valor e todo o módulo responderá:

 .Panel - grande {font-size: 1.2rem; }

Nós simplesmente adicionamos esta classe a um painel para torná-lo maior: & lt; div classe = "painel de painel - grande" & gt; . Isso mudará a definição local de um em e, assim, o raio de fronteira e a alteração do preenchimento também, juntamente com o tamanho da fonte de seus elementos filho. Com uma única declaração, redigimos cada parte do módulo.

A panel module, with paddings and border radius defined using ems — Um módulo de painel, com piziras e raio de fronteira definido usando EMS

Da mesma forma, poderíamos criar uma versão pequena:

 .Panel - pequeno {font-size: 0.8rem; }

Ao aterrar o módulo usando um tamanho de fonte de nível superior em rems, tornamos estável e previsível. Ao definir tudo o mais dentro do EMS, fizemos todas as suas partes componentes escaláveis.

It is possible to base the size of everything inside the module on one value, then change that value to scale it all — É possível basear o tamanho de tudo dentro do módulo em um valor, então altere esse valor para dimensionar tudo

Este é um padrão poderoso. Você pode usar essa abordagem para qualquer coisa em sua página, de menus suspensos para botões de mídia social. Encerrecer o módulo com valor REM, depois use em para praticamente todo o resto de pinhas para posicionamento para tamanhos de ícones.

Tornando responsivo

Vamos empurrar o princípio um nível ainda mais. Também dimensionamos o módulo (e teoricamente todos os outros módulos na página) usando REM e EMS. Isso, finalmente, significa que seu tamanho é baseado no tamanho da fonte do elemento raiz. Em seguida, podemos ajustar esse valor único para fazer a página inteira responder por sua vez.

Vamos trazer outra unidade relativa: vh. . O valor computado desta unidade é derivado do tamanho da tela do usuário; é igual a 1 por cento da largura da viewport. Se usarmos a unidade VH para definir o tamanho da fonte raiz, ele será automaticamente escalará respondidamente, consultas de mídia. Defina o tamanho da fonte na raiz para 2VW. :

 html {
  Tamanho da fonte: 2VW;
}

Infelizmente, o efeito é um pouco forte demais. Em um iPhone 6, por exemplo, isso será computar para 5.5px, o que é muito pequeno. Da mesma forma, é excessivamente grande em telas maiores. Para suavizar o efeito, podemos fazer uso do CSS Calc () função:

 html {
  Tamanho da fonte: Calc (0.6em + 1VW);
}

Agora, o tamanho da fonte é derivado em parte de um valor estável e parcialmente de um responsivo. Isso produz um efeito muito melhor. O 0.6em. se comporta como uma espécie de tamanho mínimo de fonte. Agora, a raiz será escalar fluidamente de cerca de 13px no smartphone para 21px em uma tela média de desktop.

Com sua página composta de módulos escaláveis, cada um aterrado ao valor REM, e eles também serão escalados com a viewport. A página é estruturada com uma hierarquia de três níveis; Você pode alterar o tamanho da página inteira, um módulo individual ou um único elemento, fazendo uma edição simples para o tamanho da fonte. Confie na EMS e rems, e o navegador cuidará do trabalho para você.

Você ainda pode precisar adicionar a consulta de mídia ocasional para controlar o envolvimento de linha e algumas outras preocupações responsivas. Mas esse pequeno código combinado com o hábito de usar o EMS e os rems te levará muito do caminho até lá.

Este artigo foi originalmente destaque em Revista Net. Edição 288; compre aqui

Artigos relacionados:

10 truques de tipografia Todo designer deve saber
Guia de um designer para tipografia e fontes
Tipografia de Web acessível mestre

Projetar um site responsivo com dimensionamento baseado em EM

Unidades de tamanho de fonte

Construindo um módulo com EMS

Dimensionando dinamicamente o design

Tornando responsivo

Como - Artigos mais populares

3 Técnicas essenciais de retopologia Zbrush

Como fazer uma captura de tela em um Mac

Como desenhar uma pessoa

Como criar efeitos de líquido com webgl

5 coisas que você precisa para pintura a óleo

Obtenha sua cabeça reaja com esses cinco fatores

Desenhe um retrato de lápis de um cão

Como pintar vidro curvo em um capacete de espaço

Categorias