Como criar: texto responsivo

Tamanho da fonte responsiva

O tamanho do texto pode ser ajustado usando vw Configuração de unidade, que significa "largura da viewport".

Dessa forma, o tamanho do texto seguirá o tamanho da janela do navegador:

<h1 style="font-size:8vw;">Olá Mundo</h1>
<p style="font-size:2vw;">Ajuste o tamanho da janela do navegador para ver como o tamanho da fonte se ajusta.</p>

Experimente você mesmo

Nota:a viewport é o tamanho da janela do navegador.1vw = 1% da largura da viewport. Se a largura da viewport for 50 centímetros, então 1vw para 0,5 centímetros.

Alterar tamanho da fonte usando consultas de mídia

Você ainda pode usar consultas de mídia para alterar o tamanho da fonte de elementos em tamanhos de tela específicos:

Ver efeito

/* Se a largura da tela for 601px ou maior, defina o font-size do <div> como 80px */
@media screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}
/* Se a largura da tela for 600px ou menor, defina o font-size do <div> como 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Experimente você mesmo

Páginas relacionadas

Tutorial:Fonte CSS

Tutorial:Consulta de mídia CSS