5.6 KiB
title | localeTitle |
---|---|
Units | Unidades |
Unidades
Muitas propriedades CSS, como width
, margin
, padding
, font-size
etc., têm comprimento. O CSS tem uma maneira de expressar o tamanho em várias unidades. O comprimento é uma combinação de um número e uma unidade sem espaço em branco. Por exemplo, 5px
, 0.9em
etc.
comprimento
Unidades de Comprimento Comum
Existem várias unidades usadas pelo CSS para expressar o comprimento. Os mais antigos, suportados por todos os navegadores, são:
- rem - "r" significa "root": "root em" -, que é igual ao tamanho da fonte fixado ao elemento raiz (quase sempre
<html>
). - vh e vw - Muitas técnicas de design da Web responsivas dependem muito de regras de porcentagem. No entanto, as medidas de porcentagem de CSS nem sempre são a melhor solução para todos os problemas. A medida vh é igual a 1/100 da altura da viewport. Assim, por exemplo, se a altura do navegador for 800px, 1vh é igual a 8px e, de forma semelhante, se a largura da viewport for 650px, 1vw será equivalente a 6.5px.
- vmin e vmax - Essas unidades estão relacionadas ao valor máximo ou mínimo de vh e vw . Por exemplo, se o navegador fosse definido como 1200px de largura e a altura 600px, 1vmin seria 6px e 1vmax seria 12px. No entanto, se a largura foi definida para 700px e a altura definida para 1080px, vmin será igual a 7px e vmax 10.8px.
- ex e ch - Essas unidades, semelhantes a em e rem , dependem da fonte atual e do tamanho da fonte. No entanto, ao contrário de em e rem , essas unidades também dependem de
font-family
, pois são determinadas com base em medidas específicas para cada fonte. A unidade ch ("unidade de caracteres") é definida como a largura do caractere zero ("0"). A ex- unidade é definida como "a altura-x atual da fonte atual ou a metade de 1em". A altura-x de uma determinada fonte é a altura do "x" minúsculo dessa fonte. Geralmente é a marca do meio da fonte.
| Unidade | Descrição | | --------------- | ----------------------- | | em | 1 em é o valor computado do tamanho da fonte no elemento em que é usado. | | ex | 1 ex é a altura x da fonte atual. A altura x é geralmente (mas nem sempre, por exemplo, se não houver 'x' na fonte) igual à altura de um 'x' minúsculo | | ch | 1 ch é o avanço do glifo '0' (zero) na fonte atual. 'ch' significa caráter. | | rem | 1 rem é o valor calculado da propriedade font-size para o elemento raiz do documento. | vw | 1vw é 1% da largura da viewport. 'vw' significa 'largura da janela de visualização'. | | vh | 1vh é 1% da altura da viewport. 'vh' significa 'altura da janela de visualização'. | | vmin | Igual ao menor de 'vw' ou 'vh' | | vmax | Igual ao maior de 'vw' ou 'vh' |
Existem dois tipos gerais de unidades usadas para comprimento e tamanho em CSS: relativo e absoluto.
Unidades Relativas
As unidades relativas mudam em relação ao tamanho atual da fonte do elemento ou a outras configurações. Algumas unidades relativas são
em
- a largura de uma letra maiúscula M do
font-size
dafont-size
do elemento atual. - Tamanhos de fonte são herdados dos elementos pai.
- Exemplo:
html div { font-size: 16px; } div h3 { font-size: 2rem; }
Aqui, o<h3>
será igual a32px
já que ofont-size
dafont-size
do elemento pai ou atual é16px
. rem
- raiz
em
, ou a largura de uma letra maiúscula M da base padrãofont-size
. - Tamanhos de fonte pai não terão efeito.
- Exemplo:
html body { font-size: 16px; } p { font-size: 1.5rem; }
Aqui, o<p>
será igual a24px
já que ofont-size
padrão dafont-size
básica é16px
. %
- o tamanho percentual relativo ao tamanho de um pai.
- Exemplo:
html div { width: 400px; } div p { width: 75%; }
Como a largura do pai é400px
, a largura do pargraph interno seria300px
, ou 75% de400px
. vw
- largura de visualização ou 1/100 da largura da janela de visualização
- Exemplo:
html body { width: 100vw; }
Obody
preenche a largura da viewport, seja 417 px, 690 px ou qualquer largura. vh
- altura da visualização ou 1/100 da altura da janela de visualização
- Exemplo:
html div { height: 50vh; }
Estediv
preencherá metade da altura da viewport, seja 1080px, 1300px ou qualquer altura.
Unidades Absolutas
Unidades absolutas serão as mesmas, independentemente do tamanho da tela ou outras configurações. Algumas unidades absolutas são
px
- pixel
- as contagens de pixels são relativas à qualidade da tela do dispositivo de visualização
in
,cm
,mm
- polegada, centímetro, milímetro
- Uma polegada é uma polegada em uma tela pequena ou uma tela grande
pt
,pc
- pontos (1/72 de polegada) e picas (12 pontos)
Exemplo
p {
font-size: 24px;
}
div {
width: 3in;
border-width: 3pt;
}
Um parágrafo com font-size: 24px
será exibido como 24px em uma tela de telefone, tablet ou desktop.
A div
aparecerá como 3 polegadas de largura e a border
na div
será 3/72 de uma polegada de espessura, independentemente do tamanho da tela.