Redimensionamento

Ajustar a dimensão de elemento ou layout pra funcionar em telas e contextos diferentes.

Hard

O que é

Redimensionamento é mudar a largura, a altura ou a escala de um elemento no design ou na interface, pra que ele mantenha aparência e uso corretos em aparelhos, resoluções e contextos diferentes. É um pedaço central de fazer algo funcionar tanto no monitor grande quanto no celular.

Ele anda colado ao design responsivo, porque o elemento redimensiona de forma fluida conforme a tela muda: o texto ajusta o comprimento de linha, a imagem escala mantendo proporção e o grid se adapta. Sem isso, aparece scroll torto, imagem distorcida e texto que fica ilegível.

O maior cuidado é com proporção e acessibilidade. Uma imagem que não mantém o aspecto acaba esticada e feia. E o redimensionamento precisa aguentar a pessoa dar zoom ou aumentar a fonte sem o layout quebrar, porque senão você exclui quem tem baixa visão.

Em uma frase

Vamos configurar o redimensionamento do banner pra escalar mantendo a proporção, senão ele estica feio no celular.

A pergunta que ele responde

Como faço um elemento manter aparência e proporção quando a tela muda de tamanho?

Quando usar

Ajuda na hora de montar layout que precisa funcionar em telas de tamanhos diferentes e ainda aguentar o zoom de quem usa.

Como não usar

O cuidado é não servir uma imagem enorme e só encolher ela no navegador, porque isso gasta banda à toa e prejudica o carregamento da página.

Na prática

Imagine a imagem do banner configurada pra escalar mantendo a proporção. Assim ela se ajusta ao espaço disponível e não fica esticada quando aparece no celular.

Não confunda com

Vale separar redimensionamento de design responsivo. O redimensionamento é a operação pontual de ajustar o tamanho de um elemento, aquele ato específico. O design responsivo é a estratégia inteira de adaptar a interface a cada tela. Ou seja, o redimensionamento é uma das ferramentas que o design responsivo usa, não a coisa toda.

D

Em inglês

Resizing

Pronúncia

ri-sái-zing

Também chamado de

resize, redimensionar, ajuste de tamanho

Origem

n/a

Fonte

Saiba mais

MDN Web Docs, guia sobre imagens responsivas