Redimensionamento dinâmico de texto

Em sua busca para criar uma interface web responsiva, você encontrou um obstáculo: enquanto as imagens adaptam seu tamanho perfeitamente à medida que a janela é redimensionada, o texto permanece obstinadamente fixo. Resolver esse problema pode melhorar a experiência do usuário, garantindo que o conteúdo da página permaneça legível e esteticamente agradável, independentemente das dimensões da janela de visualização.

jQuery to the Rescue

Embora CSS puro oferece opções limitadas para redimensionar texto, JavaScript, especialmente a biblioteca jQuery, fornece uma solução simples. Ao aproveitar o jQuery, você pode ajustar dinamicamente o tamanho do texto com base na altura da janela, criando uma interface verdadeiramente fluida e responsiva.

Como funciona

O script jQuery monitora eventos de redimensionamento de janela. Após a detecção, ele calcula a alteração percentual na altura da janela em comparação com uma altura padrão predefinida na qual o tamanho do texto é ideal. Essa porcentagem é então aplicada ao tamanho base da fonte, resultando em um ajuste proporcional do tamanho da fonte.

Implementação

Incorpore o seguinte código JavaScript em sua página:

$(function() {
    $(window).bind('resize', function()
    {
        resizeMe();
        }).trigger('resize');
    });
function resizeMe() {
//Standard height, for which the body font size is correct
var preferredHeight = 768;
//Base font size for the page
var fontsize = 18;

var displayHeight = $(window).height();
var percentage = displayHeight / preferredHeight;
var newFontSize = Math.floor(fontsize * percentage) - 1;
$("body").css("font-size", newFontSize);
}

A mágica por trás do script

• preferredHeight define a altura da janela de linha de base na qual o tamanho da fonte especificado é considerado apropriado.
• a porcentagem calcula a proporção entre a altura atual da janela e a altura preferida.
• newFontSize ajusta o tamanho da fonte original com base na porcentagem, garantindo a legibilidade em diferentes tamanhos de tela.

Conclusão

Armado com este script jQuery, você pode obter facilmente o redimensionamento dinâmico de texto em sua página da web. Ao dimensionar dinamicamente o tamanho do texto em resposta ao redimensionamento da janela, você cria uma experiência amigável que aprimora a acessibilidade e a imersão, independentemente do dispositivo ou da janela de visualização.