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 janela de visualização do navegador (a área visível da página da web). Elas permitem criar designs responsivos dimensionando elementos e textos proporcionalmente à largura ou à altura da janela de visualização. As unidades de viewport são particularmente úteis para criar layouts fluidos, dimensionar textos e posicionar elementos de forma que se adaptem a diferentes tamanhos de tela.

Há quatro unidades de viewport:

vw (largura da área de visualização): representa 1% da largura da área de visualização. Por exemplo, 10vw é igual a 10% da largura da área de visualização.

vh (altura da janela de visualização): representa 1% da altura da janela de visualização. Por exemplo, 25vh é igual a 25% da altura da janela de visualização.

vmin (mínimo da janela de visualização): representa 1% da menor dimensão da janela de visualização (largura ou altura). Por exemplo, se a janela de visualização for mais larga do que alta, 5vmin equivale a 5% da altura da janela de visualização.

vmax (máximo da área de visualização): representa 1% da maior dimensão da área de visualização (largura ou altura). Por exemplo, se a área de visualização for mais larga do que alta, 8vmax equivale a 8% da largura da área de visualização.

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

selector {
    property: value;
}

selector: O seletor CSS que seleciona o(s) elemento(s) HTML que você quer estilizar.

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

value: Um valor que inclui unidades da janela de visualização (por exemplo, 50vw, 75vh, 10vmin, 5vmax).

Por exemplo:

.box {
    width: 50vw; /* A largura da caixa será 50% da largura da área de visualização */
    height: 30vh; /* A altura da caixa será 30% da altura da área de visualização */
}

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

Desafio

Fácil

Você recebe um documento HTML com um título (<h1>), um parágrafo (<p>) e uma divisão (<div>). Sua tarefa é usar unidades da janela de visualização para tornar esses elementos responsivos. Siga as etapas abaixo:

Escreva uma regra de CSS que selecione o elemento <h1>. Defina seu font-size como 6vw.
Escreva uma regra de CSS que selecione o elemento <p>. Defina seu font-size como 4vmin.
Escreva uma regra de CSS que selecione o elemento <div>. Defina seu width como 80vw e seu height como 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>