Unidades de viewport

Parte da seção Estilização com CSS do Journey de HTML da Coddy. Lição 64 de 76.

No CSS, as unidades de viewport são unidades de medida relativas baseadas no tamanho da viewport do navegador (a área visível da página web). Elas fornecem uma maneira de criar designs responsivos dimensionando elementos e texto proporcionalmente à largura ou altura da viewport. As unidades de viewport são particularmente úteis para criar layouts fluidos, dimensionar texto e posicionar elementos de uma forma que se adapte a diferentes tamanhos de tela.

Existem quatro unidades de viewport:

vw (largura da viewport): Representa 1% da largura da viewport. Por exemplo, 10vw é igual a 10% da largura da viewport.

vh (altura da viewport): Representa 1% da altura da viewport. Por exemplo, 25vh é igual a 25% da altura da viewport.

vmin (mínimo da viewport): Representa 1% da menor dimensão da viewport (largura ou altura). Por exemplo, se a viewport for mais larga do que alta, 5vmin será igual a 5% da altura da viewport.

vmax (máximo da viewport): Representa 1% da maior dimensão da viewport (largura ou altura). Por exemplo, se a viewport for mais larga do que alta, 8vmax é igual a 8% da largura da viewport.

Aqui está a sintaxe básica para usar unidades de viewport:

selector {
    property: value;
}

selector: O seletor CSS que define como alvo o(s) elemento(s) HTML que você deseja estilizar.

property: A propriedade CSS que você deseja definir (por exemplo, width, height, font-size, margin, padding).

value: Um valor que inclui unidades de viewport (ex: 50vw, 75vh, 10vmin, 5vmax).

Por exemplo:

.box {
    width: 50vw; /* A largura da caixa será 50% da largura da viewport */
    height: 30vh; /* A altura da caixa será 30% da altura da viewport */
}

Neste exemplo, o elemento .box tem uma largura de 50vw e uma altura de 30vh, tornando-o responsivo tanto à largura quanto à altura da viewport.

Desafio

Fácil

Você recebeu um documento HTML com um título (<h1>), um parágrafo (<p>) e uma divisão (<div>). Sua tarefa é usar unidades de viewport para tornar esses elementos responsivos. Siga os passos abaixo:

Escreva uma regra CSS que tenha como alvo o elemento <h1>. Defina seu font-size para 6vw.
Escreva uma regra CSS que tenha como alvo o elemento <p>. Defina seu font-size para 4vmin.
Escreva uma regra CSS que tenha como alvo o elemento <div>. Defina sua width para 80vw e sua height para 50vh.

Experimente você mesmo

<html>
<head>
    <title>Viewport Units</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body style="background-color:lightblue">
    <h1>Antarctica</h1>  
    <p>The coldest continent, covered in ice and home to penguins and seals.</p>  
    <div>It has no permanent residents, only research stations.</div> 
</body>
</html>