Valores de tamanho

Módulo Progresso

0% Concluído

Os valores utilizados para definir tamanho podem ser divididos em duas categorias:

Absoluto

Valores absolutos não estao relacionados a nada mais e geralmente são considerados por terem sempre o mesmo tamanho

Unidade	Nome	Equivalencia
`cm`	centimetro	1cm = 37.8px
`mm`	milimetro	1mm = 1/10th de 1cm
`in`	inches	1in = 96px
`px`	pixels	1px = 1px

Praticamente todos esses valores são utilizados para impressão(não utilizamos centimentros para medir a tela), com excessão do pixel que é utilizado com base na medição da tela

Relativo

Tamanhos relativos são relacionados a alguma coisa como o tamanho elemento pai ou o viewport. o beneficio de usar unidades relativas é que com algum planejamento você consegue fazer o tamanho dos texto e elementos da sua tela aumentem e diminuam com base no tamanho do dispositivo ou no tamanho de outros elementos na página.

Vou mostrar algumas das unidades mais utilizadas na WEB:

Unidade	Relação
`em`	tamanho da fonte do pai
`rem`	tamanho da fonte do elemento raiz
`lh`	altura da linha do elemento
`vw`	1% da largura(width) do viewport
`vh`	1% da altura(height) do viewport
`vmin`	1% da menor dimensão do viewport
`vmax`	1% da maior dimensão do viewport

Exercício 1: Valores Absolutos

Crie um arquivo HTML (index.html) com a seguinte estrutura:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="box cm">1 cm</div>
    <div class="box mm">20 mm</div>
    <div class="box in">1 inch</div>
    <div class="box px">48 px</div>
</body>
</html>

Agora, crie um arquivo CSS (styles.css) e estilize os elementos <div> com as classes .box, de modo que:

A primeira <div> com classe .cm tenha 1 cm de largura e altura.
A segunda <div> com classe .mm tenha 20 mm de largura e altura.
A terceira <div> com classe .in tenha 1 polegada de largura e altura.
A quarta <div> com classe .px tenha 48 pixels de largura e altura.

Exercício 2: Valores Relativos

Crie um arquivo HTML (index.html) com a seguinte estrutura:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="relative-box em">1 em</div>
    <div class="relative-box rem">2 rem</div>
    <div class="relative-box lh">3 lh</div>
    <div class="relative-box vw">10 vw</div>
    <div class="relative-box vh">20 vh</div>
    <div class="relative-box vmin">5 vmin</div>
    <div class="relative-box vmax">7 vmax</div>
</body>
</html>

Agora, crie um arquivo CSS (styles.css) e estilize os elementos <div> com as classes .relative-box, de modo que:

A primeira <div> com classe .em tenha um tamanho de fonte de 1 em.
A segunda <div> com classe .rem tenha um tamanho de fonte de 2 rem.
A terceira <div> com classe .lh tenha uma altura de linha de 3 lh.
A quarta <div> com classe .vw tenha 10% da largura (width) do viewport.
A quinta <div> com classe .vh tenha 20% da altura (height) do viewport.
A sexta <div> com classe .vmin tenha 5% da menor dimensão do viewport.
A sétima <div> com classe .vmax tenha 7% da maior dimensão do viewport.

Nesses exercícios, você pode praticar a aplicação de valores de tamanho absolutos e relativos em elementos HTML e entender as diferenças entre essas unidades.