Unidades Absolutas: px, pt e cm
Aprenda quando usar unidades absolutas fixas, como pixels, pontos e centímetros.
Unidades Absolutas: px, pt e cm é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
Unidades absolutas e relativas
As unidades do CSS se dividem em duas categorias: absolutas (medidas fixas do mundo real) e relativas (escaladas em relação a outra coisa). As unidades absolutas são medidas físicas independentes do dispositivo.
px — Pixels
O pixel (px) é a unidade absoluta mais usada nas telas. Em telas padrão, 1px = 1 pixel do dispositivo. Em telas com alta DPI, os pixels do CSS correspondem a vários pixels do dispositivo, mantendo os elementos com o mesmo tamanho visual.
<button class="button">10px 20px padding</button>
pt — Pontos
Um ponto (pt) é uma unidade do design para impressão: 1pt = 1/72 de uma polegada. No CSS, 1pt = 4/3px (aproximadamente 1,33px). É usado principalmente em folhas de estilos de impressão para tipografia.
<p class="print-text">This text is sized in points (12pt), the unit used in print stylesheets.</p>
cm, mm, in — Unidades físicas
O CSS oferece centímetros (cm), milímetros (mm) e polegadas (in). Essas unidades fazem sentido em contextos de impressão, mas não são confiáveis em telas porque a DPI varia.
<div class="page">A4-width page (21cm), used for print layouts</div>
px em telas: uso prático
Para projetos web baseados em telas, px é a única unidade absoluta prática. Mesmo assim, não é recomendável usar px para tamanhos de fonte, pois isso substitui as preferências de tamanho de fonte do usuário no navegador.
Proporção de pixels do dispositivo
As telas modernas têm uma proporção de pixels do dispositivo (DPR) > 1. Uma tela de alta densidade 2x renderiza 2 pixels do dispositivo para cada pixel do CSS. É por isso que as imagens de alta DPI precisam ter 2x ou 3x o tamanho de exibição.
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='300'><rect width='400' height='300' fill='%23ff6347'/><circle cx='200' cy='150' r='100' fill='%231e90ff'/></svg>" alt="sample image" />
Quando usar px
Use px para:
- Larguras de bordas (1px é nítido)
- Sombras e transformações
- Pontos de interrupção de consultas de mídia (embora pontos de interrupção baseados em em sejam mais robustos)
- Elementos fixos de interface quando é necessário um controle exato dos pixels
Quando NOT usar px para tipografia
Definir font-size: 16px em html ou body substitui a preferência de acessibilidade do usuário em muitos navegadores. Use rem em relação ao padrão do navegador.
Q — Quarto de milímetro
A unidade q equivale a 1/4 de milímetro. Ela é usada na tipografia japonesa para impressão, permitindo um controle tipográfico preciso. É raramente usada em projetos web em geral.
PC — Paicas
Uma paica (pc) equivale a 12 pontos ou 1/6 de uma polegada. Assim como os pontos, as paicas são unidades de impressão raramente necessárias em telas digitais.
Unidades absolutas em folhas de estilos de impressão
As folhas de estilos de impressão são o principal caso de uso legítimo das unidades absolutas no CSS. As unidades físicas garantem que a página impressa tenha dimensões precisas no papel.
<div class="print-body">
<p class="page-break">Section one (page breaks after this when printed)</p>
<p>Section two</p>
</div>
Verificação rápida
Qual unidade absoluta do CSS equivale a 1/72 de uma polegada?
Recapitulação
As unidades absolutas são medidas fixas, independentes dos elementos-pai. px é a unidade prática para telas. As unidades físicas (pt, cm, in) são usadas em folhas de estilos de impressão. Evite usar px para tipografia, pois isso substitui as preferências de tamanho de fonte do usuário. Use rem em vez disso.
Perguntas Frequentes
A aula “Unidades Absolutas: px, pt e cm” é grátis?
Sim — o texto completo de “Unidades Absolutas: px, pt e cm” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “Unidades Absolutas: px, pt e cm”?
Aprenda quando usar unidades absolutas fixas, como pixels, pontos e centímetros. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Unidades Absolutas: px, pt e cm”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Unidades Absolutas: px, pt e cm
- Unidades Relativas: em e rem
- Unidades da Janela de Visualização: vw, vh e dvh
- Funções Min, Max e Clamp