Ok seu luiz.
Para saber quando utilizar cada unidade de medida, você tem que analisar qual o seu objetivo no código.
- REM: Como havia informado no post anterior, a unidade ( rem ), utiliza como base o tamanho da fonte do elemento principal do site. que pode ser ( html ) ou ( body ). Por exemplo:
<html>
<head>
<style>
body {
font-size: 20px;
}
section {
font-size: 40px;
}
td {
font-size: 10px;
}
p {
font-size: 1rem;
}
</style>
</head>
<body>
<section>
<P>Exemplo de texto 1</p>
<table>
<tr>
<td><p>Exemplo de texto 2</p></td>
<td><p>Exemplo de texto 3</p></td>
<td><p>Exemplo de texto 4</p></td>
<td><p>Exemplo de texto 5</p></td>
</tr>
</table>
<p>Exemplo de texto 6</p>
</section>
</body>
</html>
No exemplo acima, todos os elementos ( p ), vão receber a fonte com o tamanho relacionado ao ( body ). Isto é útil quando quisermos que todos os itens tenham sempre o mesmo tamanho de fonte. Não importa onde estejam.
- EM: A unidade ( em ) é bem parecida, mas, ao invés de usar o elemento ( body ) como referência, éla vai usar o seu elemento pai. Por exemplo:
<html>
<head>
<style>
body {
font-size: 20px;
}
section {
font-size: 40px;
}
td {
font-size: 10px;
}
p {
font-size: 2em;
}
</style>
</head>
<body>
<section>
<P>Exemplo de texto 1</p>
<table>
<tr>
<td><p>Exemplo de texto 2</p></td>
<td><p>Exemplo de texto 3</p></td>
<td><p>Exemplo de texto 4</p></td>
<td><p>Exemplo de texto 5</p></td>
</tr>
</table>
<p>Exemplo de texto 6</p>
</section>
</body>
</html>
No exemplo acima, o tamanho da fonte do elemento ( p ) vai variar conforme o seu elemento pai, no caso dos textos de número 2, 3, 4 e 5. Sua fonte terá tamanho de 10px, porque o seu elemento pai é o ( td ) que foi programado com fonte de tamanho 10px.
E no caso dos textos de número 1 e 6, a fonte vai ter tamanho 40px, pois o seu elemento pai é o elemento ( section )
- A unidade de medida ( ch ) é diferente das outras acima, éla é baseada na largura do caractere 0 ( zero ) de uma fonte. É útil para utilizar em formulários, quando queremos que um texto caiba certinho dentro do campo input.
Vamos supor que você escolheu a fonte arial para o exemplo abaixo, onde temos um campo de texto para o nosso usuário preencher:
<html>
<head>
<style>
body {
font-family: arial;
}
input {
width: 30ch;
}
</style>
</head>
<body>
<label>Exemplo de campo de texto</label>
<input type="text">
</body>
</html>
No exemplo acima, o campo de texto ( input ) vai ter o tamanho de exatos 30 caracteres ( 0 ) da fonte arial. Então qualquer texto com 30 caracteres, que o usuário digitar ali vai caber com certeza, pois o valor ( 0 ) é o caractere mais largo de qualquer fonte padrão.
Se trocarmos o tipo da fonte para Verdana, o tamanho da unidade ( ch ) também vai mudar para a largura do ( 0 ) desta nova fonte.
