4
ArthurBorba
7 min de leitura ·

Cansei de criar breakpoints no CSS! Achei uma solução diferente para responsividade

A definição de design responsivo da W3 Schools (tradução livre):

Design responsivo na web é sobre criar páginas que se apresentem bem em todos os dispositivos! Um design responsivo vai se ajustar automaticamente para diferentes tamanhos de telas

Uma das técnicas padrões para a construção de interfaces responsivas na web é a utilização de "Media Queries", ainda segundo a W3 Schools:

CSS media queries permitem que você aplique estilos condicionais as características do dispositivo exibindo a página web. *CSS media queries são essenciais para a construção de páginas web responsivas

A minha pergunta: será que são mesmo?

Intro 📚

Fala galera, beleza?

Sou Arthur e nos últimos anos venho trabalhando bastante em cima da responsivdade de interfaces!

Minha jornada nesse tópico começou num lançamento para a startup que eu trabalhava em 2018. Tinhamos um prazo curto para lançar um novo site, relacionado com um evento de "rebranding" da empresa.

Foi uma entrega bem intensa. Uma das coisas que mais consumiu nosso tempo foi ajustar a aparência do site para diferentes resoluções de tela.

Pra quem ainda não está familiarizado com a ideia de criar "breakpoints" com CSS media queries, veja o exemplo:

<style>
/* Tamanho da fonte do h1 padrão definida como 24px */
h1 {
  font-size: 24px;
}

Usamos a media query para criar um "breakpoint" em 1536px:

/* Tamanho da fonte do h1 alterada para 32px em telas superiores a 1536px de largura */
@media screen and (min-width: 1536px) {
h1 {
  font-size: 32px;
}
</style>

O problema 🧐

Ficar manualmente conferindo e ajustando estilos para que a interface esteja bonita em TODAS as resoluções de tela disponíveis pode ser uma tarefa muito massante. Na maioria das vezes não compensa o investimento de tempo e dinheiro.

Considerando apenas resoluções de desktop, temos telas de 1280 × 720 pixels até 3840 × 2160 pixels (4K Ultra HD). Coloque celulares e ipads na contangem, quantos breakpoints teriamos?

O resultado é que a maioria das telas serão construídas em uma resolução de referência, ajustadas para mobile se necessário, e é isso.

A solução alternativa 🤓

E se pudessemos construir uma interface escalável? Que após feita na resolução de referência, mantivesse a mesma proporçã́o de tamanho dos elementos em todas as demais resoluções de tela.

Foi assim que criei o ui-scaler, pacote open-source, publicado no NPM:

ui-scaler demo

Desde então, eu implemento minha página na resolução de referência - seja do design no Figma ou do meu próprio monitor - e sei que ela vai ser exibida igual nas demais resoluções:

  • Desenvolvo a tela uma vez para Desktop, tenho consistência nas demais resoluções
  • Desenvolvo a tela uma vez para Mobile, tenho consistência nas demais resoluções

E o melhor: é super simples de aplicar!

Como funciona ⚙️

ui-scaler se aproveita da unidade rem no CSS:

A rem unidade é uma unidade relativa que você pode usar para valores de comprimento em CSS [...] rem representa a raiz em , que se refere ao tamanho font-size do root elemento de um documento [...] neste caso a tag de elemento html.

Para chegar no efeito demonstrado acima é essencial que todos os estilos de tamanho e posicionamento dos elementos estejam definidos com essa unidade rem: tamanho de fonte, paddings, margens, larguras, alturas, e etc.

Duas boas notícias:

  1. Frameworks modernos, como TailwindCss e Bootstrap já aplicam seus estilos com rem por padrão
  2. ui-scaler opcionalmente converte estilos em pixels para o respectivo valor em rem (veja mais abaixo)

Dessa forma basta instalar o pacote através do NPM e executer o método scaleUI no arquivo principal do projeto (index.js, main.ts...).

Esse método vai adicionar um script super leve na página que dinamicamente altera o font-size do elemento html a depender da resolução de tela do usuário. O resultado é que todos estilos definidos em rem vão escalar proporcionalmente!

Acessibilidade web 🫂

O que torna essa abordagem viável na prática são duas considerações extras que o script faz, pois alterar dinamicamente a font-size do elemento html poderia causar conflitos com a configurações do navegador do usuário:

1) Tamanho da fonte do navegador:

O tamanho de fonte padrão é 16px, porém usuários podem alterar esse vallor em seus navegadores.

ui-scaler vai considerar a diferença do tamanho de fonte padrão (16px) para o tamanho de fonte definido pelo usuário. O script então aplicar essa diferença em todos os estilos font-sizes da página, por exemplo:

  • Usuário definiu 18px como o tamanho de fonte do seu navegador
  • ui-scaler define a diferença para +2px em uma variável CSS
  • A página tem um elemento <h1> definido como font-size: 1.5rem;
  • ui-scaler atualiza o CSS do <h1> sendo:
  • font-size: calc(1.5rem + --browser-font-size-diff);

2) Zoom do usuário:

Ao dar zoom in ou out em uma página (CTRL+ ou CTRL-), estamos efetivamente alterando a janela de visualização, o que afeta o window.innerWidth e window.innerHeight utilizados pelo ui-scaler para definir o font-size ideal daquela resolução.

O pacote utiliza da propriedade devicePixelRatio da interface window no Javascript para o seu cálculo de font-size:

O devicePixelRatio é a proporção entre os pixels físicos de uma tela e os pixels lógicos (pixels CSS)

Isso permite considerar o zoom do usuário. Em uma tela padrão sem zoom, window.devicePixelRatio vai ser 1. Em uma tela padrão com 125% de zoom, window.devicePixelRatio vai ser 1.25, então ui-scaler vai aumentar multiplicar a valor por 1.25, e assim por diante.

Aqui tive um "gotcha" recente para telas de alta densidade, como as Retina da Apple, onde o valor devicePixelRatio padrão não é 1, e sim 2+. Apliquei uma solução na v2.3.0+ do pacote para considerar isso.

Considerações finais 🏁

Breakpoints Media Queries

Mesmo com ui-scaler, os breakpoints ainda são necessários para uma interface responsiva, porém com uma recorrência MUITO menor. Basicamente vamos usá-los para re-orientar elementos entre resoluções Desktop vs Mobile e pequenos ajustes. A premissa do ui-scaler é:

  • Desenvolver uma vez para Desktop: todas resoluções exibirão igual
  • Ajustar uma vez para Mobile: todas as resoluções exibirão igual
  • iPad: depende, na maioria das vezes a exibição do Desktop já vai servir para iPads

Praticidade

A simplicidade dessa abordagem sempre foi importante para min. A execução de uma única função para resolver o problema e pronto. No website vocês conseguem ver exemplos de instalação para os principais frameworks frontend: React, Angular e Vue.

Também é possível apenas incluir uma tag <script ...> no <header> do html que a solução já funciona (veja detalhes no website).

De um projeto novo a projetos já existentes, eu almejei por ampla compatibilidade aqui.

Configurações

O método scaleUI() recebe um objeto opcional de parâmetros. Vou ressaltar as duas propriedades mais importantes aqui, o restante pode ser visualizado no website:

  • transformPixels: quando true ou object o script vai converter todos os estilos em pixels para o equivalente em rem, assim a "UI escalável" acontece. Esse parâmetro é útil para projetos já existentes onde os estilos foram definidos em pixels previemente.
  • baseFontSize: por padrão 16, serve para um ajuste global nos tamanhos e proporções. Caso todos os elementos estejam muito grandes, reduza para 15 ou 14. Caso tudo esteja pequeno após aplicar o pacote, aumente para 17, 18, e etc.

Limitações

O script não consegue acessar estilos em linha (style="...") , então <h2 style="font-size: 1rem;">... não vai poder ser ajustado caso o tamanho de fonte do navegador do usuário seja diferente do padrão ou <div style="width: 300px">... não vai poder ser convertido para rem automaticamente caso a opção esteja habilitada

Feedback 🤝

O website da solução usa ela! Caso queira um playground, acessa ai e comece a brincar com as diferentes resoluções de tela - vai conferindo a font-size do elemento html. Aplica o zoom, altera o tamanho da fonte do seu navegador e veja as respostas da página.

Gostou e quer ajudar?

  • Deixa uma ⭐ no repositório
  • Aplica no seu projeto e compartilha comigo: vou montar uma seção de "showcases" no website
  • Compartilha com outros devs frontend
  • Deixa um comentário ai em baixo (dúvidas, críticas, sugestões...)

O ui-scaler evoluiu de um pacote beta que publiquei no TabNews há dois anos atrás, quando tive bastante feedback da comunidade: Vamos tornar a web responsiva com apenas uma linha de instalação? Estou em busca de contribuidores! Conto com seu apoio para levar essa solução adiante! Obrigado

Carregando publicação patrocinada...