Textos responsivos

Nesta videoaula, você verá como criar textos responsivos para que estes possam se adaptar melhor ao tamanho da tela do dispositivo que estão sendo apresentados.

Definir tamanho de texto com unidades relativas (por exemplo, "%") pode não ser uma boa ideia. Isso porque as unidades relativas são baseadas no elemento pai, em relação ao elemento que está sendo definido. Muitas vezes, queremos definir o texto em relação ao tamanho do viewport, independentemente da dimensão do elemento pai em que o texto se encontra.

Para isso, é importante conhecer uma nova unidade que permite definir o tamanho da fonte de forma relativa ao viewport. Essa configuração pode ser feita através da utilização da unidade "vw". Essa unidade permite definir um valor de tamanho relativo ao tamanho do viewport, deixando a aparência do texto melhor adaptada ao dispositivo. Veja no exemplo:

No exemplo acima, o tamanho da fonte do parágrafo foi definido como proporcional à largura do viewport.

A medida "vw" é igual a 1/100 da largura da viewport. Então, por exemplo, se a largura do navegador é 900px, 1vw equivale a 9px. Analogamente, há também a unidade "vh", que está relacionada à altura do viewport. Dessa forma, se a altura da viewport é 750px, 1vh equivale a 7.5px.