Carregando...
Referência Completa de Unidades CSS
Este guia completo de unidades CSS foi desenvolvido para fornecer aos desenvolvedores uma referência prática e rápida sobre todas as unidades disponíveis no CSS. Ele permite entender facilmente como aplicar unidades absolutas, relativas, de viewport, de consulta de contêiner, porcentagem, ângulo, tempo, frequência, resolução, cores, funções e unidades de grid em projetos reais. Com exemplos claros e casos de uso específicos, os desenvolvedores podem escolher a unidade correta para layouts responsivos, tipografia escalável, designs acessíveis e interfaces adaptáveis a diferentes dispositivos e navegadores. Esta referência é organizada por categorias, garantindo acesso rápido às informações essenciais durante o desenvolvimento.
📊 Absolute Length Units
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| px | Pixels - pixels do dispositivo | 1px = 1/96 inch | width: 300px | Layouts de tela, bordas, sombras | Todos os navegadores |
| cm | Centímetros | 1cm = 37.8px | margin: 2cm | Estilos de impressão, medições físicas | Todos os navegadores |
| mm | Milímetros | 1mm = 3.78px | border: 1mm solid | Mídia impressa, medições precisas | Todos os navegadores |
| in | Polegadas | 1in = 96px | page-break-after: 2in | Layouts de impressão, medidas grandes | Todos os navegadores |
| pt | Pontos | 1pt = 1.33px | font-size: 12pt | Tipografia, impressão | Todos os navegadores |
| pc | Picas | 1pc = 16px | line-height: 1.5pc | Tipografia impressa, largura de colunas | Todos os navegadores |
| Q | Quarto de milímetro | 1Q = 0.25mm | margin: 4Q | Layouts de impressão, medições muito precisas | Navegadores modernos |
📊 Relative Length Units
| Unit | Description | Relative To | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| em | Unidade em | Tamanho da fonte do elemento pai | font-size: 1.2em | Tipografia, espaçamento relativo ao texto | Todos os navegadores |
| rem | Root em | Tamanho da fonte do elemento raiz | margin: 2rem | Espaçamento consistente, layouts escaláveis | IE9+ |
| ex | Altura x | Altura do “x” minúsculo da fonte atual | line-height: 2ex | Tipografia, alinhamento vertical | Todos os navegadores |
| ch | Largura de caractere | Largura do caractere '0' da fonte | width: 40ch | Contêineres de texto, monospace | IE9+ |
| cap | Altura de maiúsculas | Altura das letras maiúsculas | margin-top: 1cap | Tipografia, espaçamento vertical | Navegadores modernos |
| ic | Caractere ideográfico | Largura de caracteres CJK | width: 20ic | Tipografia para idiomas asiáticos | Navegadores modernos |
| lh | Altura de linha | Altura de linha do elemento | margin: 1lh | Ritmo vertical, espaçamento | Navegadores modernos |
| rlh | Altura de linha raiz | Altura de linha do elemento raiz | padding: 0.5rlh | Espaçamento vertical consistente | Navegadores modernos |
📊 Viewport Units
| Unit | Description | Calculation | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| vw | Largura da viewport | 1% da largura da viewport | width: 50vw | Layouts full-width, design responsivo | IE9+ |
| vh | Altura da viewport | 1% da altura da viewport | height: 100vh | Seções full-height, hero sections | IE9+ |
| vmin | Viewport mínimo | 1% da menor dimensão da viewport | font-size: 4vmin | Elementos quadrados, tipografia responsiva | IE9+ |
| vmax | Viewport máximo | 1% da maior dimensão da viewport | width: 50vmax | Layouts responsivos, design adaptativo | IE9+ |
| vi | Viewport inline | 1% da viewport na direção inline | padding: 2vi | Propriedades lógicas, layouts internacionais | Navegadores modernos |
| vb | Viewport block | 1% da viewport na direção block | margin: 3vb | Propriedades lógicas, modos de escrita | Navegadores modernos |
| dvw | Largura dinâmica da viewport | 1% da largura dinâmica | width: 100dvw | Layouts mobile, barra de endereço | Navegadores modernos |
| dvh | Altura dinâmica da viewport | 1% da altura dinâmica | height: 100dvh | UI full-height em mobile | Navegadores modernos |
| lvw | Largura da viewport grande | 1% da largura grande | max-width: 90lvw | Layouts mobile, estado visível do UI | Navegadores modernos |
| lvh | Altura da viewport grande | 1% da altura grande | min-height: 100lvh | Layouts mobile, viewport máxima | Navegadores modernos |
| svw | Largura da viewport pequena | 1% da largura pequena | width: 100svw | Layouts mobile, UI oculto | Navegadores modernos |
| svh | Altura da viewport pequena | 1% da altura pequena | height: 100svh | Layouts mobile, viewport mínima | Navegadores modernos |
📊 Container Query Units
| Unit | Description | Calculation | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| cqw | Largura do contêiner | 1% da largura do contêiner | width: 50cqw | Design responsivo baseado em contêiner | Navegadores modernos |
| cqh | Altura do contêiner | 1% da altura do contêiner | height: 80cqh | Layouts baseados em contêiner | Navegadores modernos |
| cqi | Inline do contêiner | 1% da largura inline do contêiner | padding: 2cqi | Layouts lógicos de contêiner | Navegadores modernos |
| cqb | Block do contêiner | 1% da altura block do contêiner | margin: 1cqb | Dimensionamento em direção block | Navegadores modernos |
| cqmin | Mínimo do contêiner | 1% da menor dimensão do contêiner | font-size: 3cqmin | Tipografia baseada em contêiner | Navegadores modernos |
| cqmax | Máximo do contêiner | 1% da maior dimensão do contêiner | border-radius: 2cqmax | Estilização baseada em contêiner | Navegadores modernos |
📊 Percentage Units
| Unit | Description | Relative To | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| % | Porcentagem | Propriedade correspondente do elemento pai | width: 50% | Layouts flexíveis, design responsivo | Todos os navegadores |
📊 Angle Units
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| deg | Graus | 360deg = círculo completo | transform: rotate(45deg) | Rotações, gradientes | Todos os navegadores |
| grad | Gradians | 400grad = círculo completo | transform: rotate(100grad) | Cálculos matemáticos, gradientes | Todos os navegadores |
| rad | Radianos | 2π rad = círculo completo | transform: rotate(1.57rad) | Transformações matemáticas | Todos os navegadores |
| turn | Voltas | 1turn = círculo completo | transform: rotate(0.25turn) | Rotações intuitivas, animações | IE9+ |
📊 Time Units
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| s | Segundos | 1s = 1000ms | transition-duration: 2s | Animações, transições | Todos os navegadores |
| ms | Milissegundos | 1000ms = 1s | animation-delay: 500ms | Temporização precisa, animações rápidas | Todos os navegadores |
📊 Frequency Units
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| Hz | Hertz | 1Hz = 1 ciclo por segundo | Não usado com frequência | Propriedades de áudio (futuro) | Limitado |
| kHz | Kilohertz | 1kHz = 1000Hz | Não usado com frequência | Propriedades de áudio (futuro) | Limitado |
📊 Resolution Units
| Unit | Description | Definition | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| dpi | Pontos por polegada | Pontos físicos por polegada | @media (min-resolution: 300dpi) | Displays High-DPI, impressão | IE9+ |
| dpcm | Pontos por centímetro | Pontos físicos por cm | @media (min-resolution: 118dpcm) | Medições métricas, impressão | IE9+ |
| dppx | Pontos por px | Pixels do dispositivo por pixel CSS | @media (min-resolution: 2dppx) | Displays Retina, device pixel ratio | IE9+ |
| x | Alias para dppx | Mesma definição do dppx | @media (min-resolution: 2x) | Displays Retina, sintaxe simplificada | Navegadores modernos |
📊 Color Units
| Unit | Description | Format | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| \# | Hexadecimal | #RRGGBB ou #RGB | color: #ff0000 | Notação padrão de cores | Todos os navegadores |
| rgb() | Função RGB | rgb(r, g, b) | color: rgb(255, 0, 0) | Controle preciso de cores | Todos os navegadores |
| rgba() | RGB com alpha | rgba(r, g, b, a) | background: rgba(255, 0, 0, 0.5) | Cores transparentes | IE9+ |
| hsl() | Função HSL | hsl(h, s%, l%) | color: hsl(0, 100%, 50%) | Seleção intuitiva de cores | IE9+ |
| hsla() | HSL com alpha | hsla(h, s%, l%, a) | background: hsla(0, 100%, 50%, 0.5) | Cores HSL transparentes | IE9+ |
| hwb() | Função HWB | hwb(h w% b%) | color: hwb(0 0% 0%) | Modelo de cor alternativo | Modern browsers |
| lab() | Função Lab | lab(l a b) | color: lab(50% 20 -30) | Espaço de cor perceptual | Modern browsers |
| lch() | Função LCH | lch(l c h) | color: lch(50% 40 180) | Espaço de cor LCH cilíndrico | Modern browsers |
| oklab() | Função OKLab | oklab(l a b) | color: oklab(0.5 0.2 -0.3) | Espaço de cor Lab melhorado | Modern browsers |
| oklch() | Função OKLCH | oklch(l c h) | color: oklch(0.5 0.4 180) | Esp | |
| color() | Função Color | color(space r g b) | color: color(display-p3 1 0 0) | Espaços de cor de gamut amplo | Modern browsers |
📊 Function Units
| Unit | Description | Calculation | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| calc() | Cálculo matemático | Combina diferentes unidades | width: calc(100% - 20px) | Cálculos mistos | IE9+ |
| min() | Valor mínimo | Retorna menor valor | width: min(100px, 50%) | Restrições responsivas | Modern browsers |
| max() | Valor máximo | Retorna maior valor | width: max(200px, 50%) | Valores mínimos responsivos | Modern browsers |
| clamp() | Valor limitado | clamp(min, preferred, max) | font-size: clamp(1rem, 4vw, 2rem) | Responsivo com limites | Modern browsers |
| attr() | Valor de atributo | Usa valor do atributo HTML | width: attr(data-width px) | Valores dinâmicos do HTML | Suporte limitado |
| var() | Variável CSS | Usa valor de propriedade personalizada | color: var(--main-color) | Propriedades customizadas CSS | IE11+ (parcial), Modern browsers |
📊 Grid Units
| Unit | Description | Definition | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| fr | Unidade fracionária | Frações do espaço disponível | grid-template-columns: 1fr 2fr | Layouts CSS Grid, colunas flexíveis | IE10+ (-ms-) |
Code Example 15
css
CSS Code
/* Mistura de unidades absolutas e relativas */
.container {
width: calc(100vw - 2rem);
max-width: 1200px;
padding: 1em 5%;
}
/* Tipografia responsiva com clamp */
.heading {
font-size: clamp(1.5rem, 4vw, 3rem);
line-height: 1.2;
margin-bottom: 1em;
}
/* Viewport units para layouts full-screen */
.hero {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
}
/* Container query units para componentes */
.card {
width: 100cqw;
padding: 2cqi;
font-size: clamp(0.875rem, 3cqw, 1.25rem);
}
/* CSS Grid com unidades fracionárias */
.grid-layout {
display: grid;
grid-template-columns: 200px 1fr 2fr;
gap: 1rem;
}- Use unidades relativas (rem, em, %) para designs escaláveis e acessíveis.
- Prefira rem sobre em para espaçamento consistente.
- Use viewport units (vw, vh) com cuidado, pois não consideram scrollbars.
- clamp() é ideal para tipografia responsiva suave.
- Misture unidades estrategicamente com calc() em layouts complexos.
- Use px para bordas, sombras e elementos decorativos.
- Teste container query units antes de produção.
- fr em CSS Grid garante layouts flexíveis e intuitivos.
- Verifique suporte de navegador para unidades novas como dvh, lvh, svh.
- Considere unidades lógicas (vi, vb) para layouts internacionais.
- HSL/HSB facilita manipulação e theming de cores.
- Sempre forneça fallbacks para unidades novas em navegadores antigos.
- Teste combinações de unidades em múltiplos dispositivos e tamanhos de tela.
🧠 Teste Seu Conhecimento
Pronto para Começar
Reference Knowledge Check
Teste seu conhecimento sobre unidades CSS e suas aplicações.
3
Perguntas
70%
Para Passar
∞
Tempo
∞
Tentativas
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo