dppx
Pontos por pixel CSS — a densidade dita na língua da própria folha.
Um dppx conta pontos físicos por pixel CSS: 1dppx é a tela clássica, 2dppx a “retina”, 3dppx os vidros mais densos. É o mesmo número que o JavaScript entrega em devicePixelRatio — a norma ainda registra x como apelido de cartório.
É a forma moderna das consultas de resolução: min-resolution: 2dppx diz “tela densa” sem obrigar ninguém a multiplicar 96 de cabeça. A escolha certa sempre que a folha precisa servir a imagem à altura do vidro.
@media (min-resolution: 2dppx) {
.mapa {
background-image: url(mapa@2x.png);
}
}