Pular para o conteúdo
Câmara de Medidas do CSS

/static/camara/unidade/dpi/

Menu

CSS-027 · Resolução

dpi

Pontos por polegada — a densidade da tinta, agora também a do vidro.

Um dpi é um ponto por polegada: a unidade com que as gráficas sempre mediram a finura da tinta, admitida no CSS pelo tipo <resolution>. A aritmética é a do pixel de referência: a tela padrão vale 96dpi, e uma tela “retina” de fator 2 responde por 192dpi.

Seu balcão de atendimento são as media queries de resolution, escolhendo imagens conforme a densidade do aparelho. Na prática foi aposentada pela prima dppx, que faz a mesma conta sem carregar o 96 na memória.

@media (min-resolution: 192dpi) {
  .logo {
    background-image: url(logo@2x.png);
  }
}
Com tinta dobrada no vidro, a folha troca de imagem.