28 de abril de 2020 • 1 min de leitura
Criando Textos Responsivos com CSS
Aprenda a deixar seus textos responsivos e fluidos em qualquer tela com viewport units e funções min-max do CSS.
Introdução
Fala pessoal! Continuando as nossas Dicas de CSS, hoje iremos aprender sobre um tema extremamente importante! Os famososo textos responsivos!
É muito normal utilizarmos vários media-queries para poder ter o nosso texto funcionando para diferentes tipos de tela, mas nem sempre fica tão legal ou fluido. Sem contar que escrevemos muito mais código para isso.
A maneira que vamos fazer aqui, nós iremos utilizar a viewport unit vw
, que calcula uma porcentagem da largura (width
) da tela e vamos usar as funções matemáticas do CSS de min
e max
para podermos ter os textos em seus tamanhos corretos.
Esse post foi inspirado nesse tweet da Una Kravets e espero que gostem!
Você pode ver a demo do vídeo aqui e o código aqui.
Vídeo
Conclusão
Novamente foi um post/vídeo bastante simples, mas que espero que seja útil para vocês irem aprendendo esses pequenos detalhes. Peço novamente que se puderem, compartilhem com seus amigos e não deixem de se inscrever no canal do YouTube, eu estou começando ainda, então é muito importante que vocês me ajudem nesse início!