Como fazer - Texto responsivo
Aprenda a criar tipografia responsiva com CSS.
Olá Mundo
Redimensione a janela do navegador para ver como o tamanho da fonte é dimensionado.
Tamanho da fonte responsiva
O tamanho do texto pode ser definido com uma vw
unidade, o que significa a "largura da janela de visualização".
Dessa forma, o tamanho do texto seguirá o tamanho da janela do navegador:
Exemplo
<h1 style="font-size:8vw;">Hello World</h1>
<p
style="font-size:2vw;">Resize the browser window to see how the font size
scales.</p>
Viewport é o tamanho da janela do navegador. 1vw = 1% da largura da janela de visualização. Se a janela de visualização tiver 50 cm de largura, 1vw é 0,5 cm.
Alterar o tamanho da fonte com consultas de mídia
Você também pode usar consultas de mídia para alterar o tamanho da fonte de um elemento em tamanhos de tela específicos:
Tamanho variável da fonte.
Exemplo
/* If the screen size is 601px wide or
more, set the font-size of <div> to 80px */
@media screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px wide or less,
set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
Dica: Acesse nosso Tutorial de fontes CSS para saber mais sobre fontes.
Para saber mais sobre consultas de mídia, leia nosso Tutorial de consultas de mídia CSS .