Introdução
Neste laboratório, aprenderemos como implementar tipografia fluida usando CSS. A tipografia fluida garante que o texto se adapte à largura da viewport (área de visualização), tornando-o mais responsivo e acessível para diferentes tamanhos de tela. Ao usar a função clamp() e uma fórmula para calcular valores responsivos para font-size, podemos criar um design mais dinâmico e amigável ao usuário.
Tipografia Fluida
index.html e style.css já foram fornecidos na VM (Máquina Virtual).
Para criar texto que se ajusta em tamanho com base na largura da viewport, você pode usar CSS. Uma maneira de fazer isso é usando a função clamp() para definir os tamanhos de fonte mínimo e máximo. Outra maneira é usar uma fórmula para calcular um valor responsivo para o tamanho da fonte. Aqui está um exemplo de elemento HTML com a classe fluid-type:
<p class="fluid-type">Hello World!</p>
Aqui está o código CSS correspondente que define o tamanho da fonte para ajustar entre 1rem e 3rem com base na largura da viewport:
.fluid-type {
font-size: clamp(1rem, 8vw - 2rem, 3rem);
}
Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.
Resumo
Parabéns! Você concluiu o laboratório de Tipografia Fluida. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.