Como alterar o tamanho da fonte usando consultas de mídia

Um site responsivo altera sua aparência, dependendo do dispositivo em que está sendo exibido. Com o objetivo de tornar um site responsivo, use as consultas de mídia CSS. Essas consultas permitem que você altere um recurso específico do seu site com base na largura ou na resolução da tela do dispositivo. Por exemplo, você pode ocultar um elemento com base no tamanho da tela ou alterar o tamanho da fonte do conteúdo do site, etc. Aqui mostraremos como você pode alterar o tamanho da fonte do texto que aparece em seu site usando consultas de mídia.

Como alterar o tamanho da fonte usando consultas de mídia

Tornar o texto responsivo a um site é chamado de tipografia fluida, o que significa que seu texto alterará seu tamanho com base no tamanho da tela do dispositivo. Aqui, apresentaremos dois métodos diferentes para tornar o texto do seu site responsivo.

Método 1

O primeiro método que pode ser usado para tornar seu texto responsivo é usando consultas de mídia. Aqui está um exemplo.

Html

Tornar o texto responsivo a um site é chamado de tipografia fluida, o que significa que seu texto mudará seu tamanho com base na tela
tamanho do dispositivo.

Aqui afirmamos um parágrafo no qual vamos demonstrar como alterar o tamanho da fonte usando uma consulta de mídia.

CSS

p.texto
Background-Color: Azure;
preenchimento: 15px;

Primeiro de tudo, estamos usando alguns CSs básicos para fornecer algumas cores e preenchimento de fundo para o parágrafo.

CSS

@Media Screen e (Min-Width: 700px)
p.texto
Size da fonte: 25px;

A primeira consulta aplicada afirma que, se a largura mínima da tela for 700px ou mais larga, o tamanho da fonte do parágrafo será 25px.

CSS

@media Screen e (Max-Width: 699px)
p.texto
Size da fonte: 16px;

E esta última consulta afirma que, se a largura máxima da tela for 699px ou menor, o tamanho da fonte do parágrafo será de 16 px ou mais largo.

Saída

Quando a largura da tela é 700px ou mais larga.

Quando a largura da tela é 699px e menor.

O tamanho da fonte foi alterado com sucesso usando consultas de mídia.

Método 2

A segunda abordagem que você pode usar para redimensionar seu texto é usando a largura da viewport. Usando isso, o texto será alterado de acordo com o tamanho do navegador.

Html

Tornando seu texto responsivo

Tornar o texto responsivo a um site é chamado de tipografia fluida, o que significa que seu texto mudará seu tamanho com base na tela
tamanho do dispositivo.

No código acima, definimos um título e um parágrafo e aplicaremos a largura da viewport sobre eles para alterar o tamanho da fonte em relação à janela do navegador.

CSS

H2
Size da fonte: 9VW;

Aqui definimos o tamanho da fonte do cabeçalho para 9VW. A unidade VW significa largura de viewport.

CSS

P
Size da fonte: 4VW;

No que diz respeito ao tamanho da fonte do parágrafo, o tamanho da fonte foi definido como 4VW.

Saída

O método está funcionando corretamente.

Conclusão

Com o objetivo de fazer o texto aparecer nas páginas da web responsivas, você pode usar consultas de mídia. Na consulta da mídia, especifique o tamanho da fonte do texto em qualquer largura específica e o tamanho da fonte será alterado de acordo com o tipo de dispositivo. Outro método de executar esta tarefa é usar a largura da viewport. Este método simplesmente exige que você atribua um determinado tamanho de fonte ao texto na unidade 'VW'. Ambos os métodos foram discutidos neste post com a ajuda de exemplos relevantes.