ui-scaler: abordagem simples & moderna para interfaces responsivas

UI responsiva de maneira fácil

O ui-scaler é sobre consistência no design e aumento de produtividade.

Tudo com a execução de uma única função.

Ampla compatibilidade e atencioso a acessibilidade web.

Vantagens:

1. Consistência no design

O ui-scaler garante que todos usuários tenham a mesma experiência no seu website

2. Aumento de produtividade

Construa sua interface apenas na resolução de referência, seja a do design no Figma ou a do seu próprio monitor. Com a utilização do pacote, você não precisa gastar tempo conferindo e ajustando as demais resoluções de dispositivos do seu público alvo

Como funciona:

ui-scaler altera dinamicamente o tamanho da fonte da tag html da página, baseado na resolução de tela do usuário. Isso faz com que elementos definidos com a unidade rem se transformem proporcionalmente:

• Script leve (3kb)
• Escuta por alterações na resolução da tela
• Acessibilidade web: considera o tamanho da fonte do navegador e zoom do usuário
• Pode ser configurado para transformar estilos definidos em pixels a rem
• Ótima sinergia com frameworks modernos, como TailwindCss e Bootstrap

Instalação:

npm i ui-scaler

No ser aquivo principal (index.js, main.js, ...):

import scaleUI from 'ui-scaler'

Execute o método no final do arquivo:

scaleUI()

Opções:

O método scaleUI recebe alguns parâmetros opcionais. Confira no website a lista completa.