Podcast do CSS - 008: Dimensionamento de unidades
A Web é uma mídia responsiva, mas às vezes você quer controlar suas dimensões para melhorar a qualidade geral da interface. Um bom exemplo disso é limitar os comprimentos de linha para melhorar a legibilidade. Como você faria isso em um meio flexível como a Web?
Para este caso,
é possível usar uma unidade ch, que é igual à largura de um "0"
na fonte renderizada no tamanho calculado.
Esse bloco permite limitar a largura do texto com uma unidade projetada para dimensionar o texto,
o que, por sua vez,
permite um controle previsível,
independentemente do tamanho do texto.
A unidade ch é uma das poucas unidades úteis para contextos específicos, como este exemplo.
Numbers
Os números são usados para definir opacity, line-height e até mesmo para valores de canais de cores em rgb.
Os números são números inteiros sem unidade (1, 2, 3, 100) e decimais (0,1, 0,2, 0,3).
Os números têm significado dependendo do contexto.
Por exemplo, ao definir line-height,
um número representa uma proporção se você o definir sem uma unidade de suporte:
p {
font-size: 24px;
line-height: 1.5;
}
Neste exemplo, 1.5 é igual a 150% do tamanho computado da fonte em pixels do elemento p.
Isso significa que, se o p tiver um font-size de 24px,
a altura da linha será calculada como 36px.
Também é possível usar números nos seguintes locais:
- Ao definir valores para filtros:
filter: sepia(0.5)aplica um filtro de sépia50%ao elemento. - Ao definir a opacidade:
opacity: 0.5aplica uma opacidade50%. - Em canais de cor:
rgb(50, 50, 50), em que os valores de 0 a 255 são aceitáveis para definir um valor de cor. Consulte a lição sobre cores. - Para transformar um elemento:
transform: scale(1.2)dimensiona o elemento em 120% do tamanho inicial.
Porcentagens
Ao usar uma porcentagem no CSS, você precisa saber como ela é calculada.
Por exemplo,width é calculado como uma porcentagem da largura disponível no elemento pai.
div {
width: 300px;
height: 100px;
}
div p {
width: 50%;
}
No exemplo acima, a largura da div p é 150px, supondo que o layout use o box-sizing: content-box padrão.
Se você definir margin ou padding como porcentagem,
elas serão uma parte da largura do elemento pai,
independentemente da direção.
div {
width: 300px;
height: 100px;
}
div p {
margin-top: 50%; /* calculated: 150px */
padding-left: 50%; /* calculated: 150px */
}
No snippet acima, margin-top e padding-left serão calculados como 150px.
div {
width: 300px;
height: 100px;
}
div p {
width: 50%; /* calculated: 150px */
transform: translateX(10%); /* calculated: 15px */
}
Se você definir um valor de transform como porcentagem,
ela é baseada no elemento com o conjunto de transformação.
Neste exemplo, a p tem um valor translateX de 10% e um width de 50%.
Primeiro, calcule qual será a largura: 150px, porque ela é 50% da largura do elemento pai.
Depois, pegue 10% de 150px, que é 15px.
Dimensões e comprimentos
Se você anexar uma unidade a um número, ele se tornará uma dimensão.
Por exemplo, 1rem é uma dimensão.
Nesse contexto, a unidade anexada a um número é chamada nas especificações como um token de dimensão.
Os comprimentos são dimensões que se referem à distância e podem ser absolutos ou relativos.
Comprimentos absolutos
Todos os comprimentos absolutos têm a mesma base,
o que os torna previsíveis onde quer que sejam usados em seu CSS.
Por exemplo, se você usar cm para dimensionar o elemento e depois exibir,
ela deverá ser precisa se você a comparar com uma régua.
div {
width: 10cm;
height: 5cm;
background: black;
}
Ao imprimir esta página, a div seria exibida como um retângulo preto de 10 x 5 cm.
Lembre-se de que o CSS não é apenas usado para conteúdo digital, mas também para estilizar conteúdo impresso.
comprimentos absolutos podem ser realmente úteis ao projetar para impressão.
| Unidade | Nome | É equivalente a |
|---|---|---|
| cm | Centímetros | 1 cm = 96 px/2,54 |
| mm | Milímetros | 1 mm = 1/10 de 1 cm |
| Q | Quarto de milímetros | 1Q = 1/40 de 1 cm |
| in | Polegadas | 1 pol = 2,54 cm = 96 px |
| pc | Picas | 1pc = 1/6 de 1in |
| pt | Pontos | 1pt = 1/72o de 1in |
| px | Pixels | 1 px = 1/96 de 1 pol. |
Comprimentos relativos
O comprimento relativo é calculado em relação a um valor base, assim como uma porcentagem.
A diferença entre eles e as porcentagens é que é possível dimensionar os elementos contextualmente.
Isso significa que o CSS tem unidades como ch, que usam o tamanho do texto como base,
e vw, que se baseia na largura da janela de visualização (a janela do seu navegador).
Os comprimentos relativos são particularmente úteis na Web devido à sua natureza responsiva.
Unidades relativas ao tamanho da fonte
O CSS fornece unidades úteis relativas ao tamanho dos elementos de tipografia renderizada,
como o tamanho do próprio texto (unidades de em) ou a largura dos caracteres de famílias tipográficas (unidades de ch).
| unidade | relativo a: |
|---|---|
| em | Em relação ao tamanho da fonte, Ou seja, o tamanho 1,5em será 50% maior que o tamanho de fonte calculado base do pai. Historicamente, a altura da letra maiúscula "M". |
| exemplo | uma heurística para determinar se é preciso usar o valor-x, uma letra "x" ou ".5em" no tamanho da fonte computada atual do elemento. |
| limite | Altura das letras maiúsculas no tamanho da fonte computada atual do elemento. |
| ch | Média de avanço de caracteres de um glifo estreito na fonte do elemento (representado pelo glifo "0"). |
| ic | Médio avanço de caractere de um glifo de largura total na fonte do elemento, representado por "水" (Ideograma de água CJK, U+6C34). |
| rem | Tamanho da fonte do elemento raiz (o padrão é 16 px). |
| lh (link em inglês) | Altura da linha do elemento. |
| rlh | Altura da linha do elemento raiz. |
Unidades relativas à janela de visualização
Você pode usar as dimensões da janela de visualização (janela do navegador) como uma base relativa. Essas unidades ocupam o espaço disponível da janela de visualização.
| unidade | relativo a |
|---|---|
| vw (link em inglês) | 1% da largura da janela de visualização. As pessoas usam essa unidade para fazer truques legais de fontes, como redimensionar a fonte do cabeçalho com base na largura da página para que o usuário redimensione a fonte também será redimensionada. |
| vh (link em inglês) | 1% da altura da janela de visualização. Você pode usar isso para organizar itens em uma interface, se você tiver uma barra de ferramentas de rodapé, por exemplo. |
| vi | 1% do tamanho da janela de visualização no eixo inline do elemento raiz. Eixo refere-se aos modos de gravação. Em modos de escrita horizontal, como o inglês, o eixo em linha é horizontal. Em modos de escrita vertical, como algumas famílias tipográficas japonesas, o eixo em linha é executado de cima para baixo. |
| vb (link em inglês) | 1% do tamanho da janela de visualização no eixo de bloco do elemento raiz. Para o eixo do bloco, seria a direção do idioma. Os idiomas LTR, como o inglês, teriam um eixo vertical de bloco, já que os leitores de língua inglesa analisam a página de cima para baixo. O modo de escrita vertical tem um eixo de bloco horizontal. |
| vmin (em inglês) | 1% da dimensão menor da janela de visualização. |
| vmax (link em inglês) | 1% da dimensão maior da janela de visualização. |
div {
width: 10vw;
}
p {
max-width: 60ch;
}
Neste exemplo, div será 10% da largura da janela de visualização, porque 1vw é 1% da largura da janela de visualização.
O elemento p tem um max-width de 60ch.
o que significa que não pode exceder a largura de 60 "0" na fonte e no tamanho calculados.
Unidades diversas
Existem algumas outras unidades que foram especificadas para lidar com determinados tipos de valores.
Unidades de ângulo
No módulo de cores (link em inglês),
analisamos unidades de ângulo,
que são úteis para definir valores de grau,
como o matiz em hsl.
Elas também são úteis para girar elementos dentro de funções de transformação.
div {
width: 150px;
height: 150px;
transform: rotate(60deg);
}
Usando a unidade de ângulo deg, é possível girar uma div em 90° no eixo central.
div {
background-image: url('a-low-resolution-image.jpg');
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
div {
background-image: url('a-high-resolution-image.jpg');
}
}
Unidades de resolução
No exemplo anterior, o valor de min-resolution é 192dpi.
A unidade dpi significa pontos por polegada.
Um contexto útil para isso é detectar telas de resolução muito alta,
como a tela Retina em uma consulta de mídia e a exibição de uma imagem de resolução mais alta.
Teste seu conhecimento
Teste seus conhecimentos sobre dimensionamento
Quais das opções a seguir são dimensões válidas?
Qual é a diferença entre as unidades absoluta e relativa?
As unidades da janela de visualização são absolutas.