Podcast do CSS - 008: Dimensionamento de unidades
A Web é um meio responsivo, mas às vezes você quer controlar as dimensões para melhorar a qualidade geral da interface. Um bom exemplo disso é limitar o comprimento das linhas 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.
Essa unidade permite limitar a largura do texto com uma unidade projetada para dimensionar texto,
o que, por sua vez,
permite um controle previsível, independentemente do tamanho do texto.
A unidade ch
é uma das unidades úteis para contextos específicos, como neste exemplo.
Numbers
Os números são usados para definir opacity
, line-height
e até mesmo para valores de canal de cor 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 da fonte em pixels computado 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.5
aplica uma opacidade50%
. - Em canais de cores:
rgb(50, 50, 50)
, em que os valores 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, ela 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 | Quartos de milímetro | 1Q = 1/40 de 1 cm |
in | Polegadas | 1 pol. = 2,54 cm = 96 px |
pc | Picas | 1pc = 1/6 de 1in |
pt | Pontos | 1 pt = 1/72 de 1 pol. |
px | Pixels | 1 pixel = 1/96 de 1 polegada |
Durações relativas
Uma comprimento relativo é calculado em relação a um valor de base, de forma semelhante a uma porcentagem.
A diferença entre esses valores e as porcentagens é que você pode dimensionar elementos de forma contextual.
Isso significa que o CSS tem unidades como ch
, que usam o tamanho do texto como base,
e vw
, que é baseada na largura da janela de visualização (a janela do navegador).
Os comprimentos relativos são particularmente úteis na Web devido à sua natureza responsiva.
Unidades relativas ao tamanho da fonte
O CSS oferece unidades úteis que são relativas ao tamanho dos elementos da tipografia renderizada,
como o tamanho do texto (unidades em
) ou a largura dos caracteres das famílias tipográficas (unidades ch
).
unidade | em relação 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 | Heurística para determinar se a altura x, uma letra "x" ou ".5em" será usada no tamanho de fonte calculado atual do elemento. |
cap | 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 (padrão: 16 px). |
lh | Altura da linha do elemento. |
rlh (em inglês) | 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 | em relação a |
---|---|
vw | 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 | 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. Idiomas LTR, como o inglês, teriam um eixo de bloco vertical, já que os leitores em inglês 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 | 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 ele não pode exceder a largura de 60 caracteres "0" na fonte e no tamanho calculados.
Unidades diversas
Há outras unidades especificadas para lidar com tipos específicos 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 em 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 unidades absolutas e relativas?
As unidades de janela de visualização são absolutas.