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!

Comentários