Já vimos em exercícios passados o uso da unidade de medida relativa com %. Usamos essa medida relativa quando queremos que um elemento use, por exemplo, 100% do espaço disponível.
HTML:
<div>
<img src="img/flor.png" alt="Foto de uma flor">
</div>CSS:
div {
width: 400px;
}No exemplo acima, dependendo do tamanho da imagem, a imagem pode ultrapassar o espaço que definimos para a <div> ou pode ocupar um espaço menor. Se queremos que a imagem ocupe todo o espaço da <div> podemos usar a unidade relativa %:
div {
width: 400px;
}
img {
width: 100%; /* Ocupe 100% do espaço disponível */
}A grande vantagem de se usar % é que não importa o tamanho que colocamos na <div>, a <img> sempre vai acompanhar o tamanho da sua tag mãe (a <div>).
EM e REM tem o mesmo conceito de % mas ao invés de serem baseadas no tamanho de um elemento, essas medidas são baseadas em tamanho de fonte. EM usa o tamanho da fonte do elemento pai e REM usa o tamanho da fonte do <html>.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Um exemplo</title>
</head>
<body>
<div>
<img src="img/foto" alt="Uma foto">
</div>
</body>
</html>CSS:
html {
font-size: 10px;
}
div {
font-size: 20px;
}
img {
width: 10em; /* A largura será de 200px */
height: 10rem; /* A altura será de 100px */
}A vantagem de usar essas medidas é que se tivermos outros elementos usando essas medidas e precisarmos mudar o tamanho de todos os elementos proporcionalmente, basta mudarmos em um lugar só. Estas unidades de medida são ideais para quando o site precisa ser exibido em diferentes tamanhos de telas, onde em cada tamanho de tela a fonte deve ser exibida em escalas de tamanhos diferentes e proporcionais entre si.