Muitas vezes, você vai querer carregar imagens e estilos diferentes em telas de resolução diferentes ou retina. Pra isso, você precisa de media queries de resolução.

Nesse artigo, discuto a forma correta de se atacar telas de alta resolução com CSS, as diferenças dos navegadores, que valores usar e algumas boas práticas. O resumo do artigo é que você deve usar uma media query parecida com essa:

@media (-webkit-min-device-pixel-ratio: 1.5),
       (min-resolution: 144dpi) {

}

Sim, eu sei que você provavelmente já viu ou usou uma versão bem maior dessa media query, cheia de prefixos de navegadores e valores estranhos. Pois bem, não use mais, o correto para os browsers de hoje e do futuro é essa aí de cima.

Porque essa media query pra telas retina?

Antes de analisar a media query em si, é bom entender direito o que significam DPIs, devicePixelRatio, retina e outros termos.

Muito tempo atrás, quando surgiram as primeiras telas com pixel ratio diferente de 1, o pessoal do WebKit criou uma media querie pra isso, a famosa -webkit-device-pixel-ratio (e suas versões com min e max). Alguns browsers chegaram a experimentar com isso, surgindo até a famosa aberração da Mozilla com min--moz-device-pixel-ratio.

Mas aí veio a especificação oficial e revisaram essa media query, criando uma equivalente com um nome mais simples: resolution. Você pode escrever min-resolution e max-resolution e ela aceita várias medidas, sendo dpi e dppx as mais importantes.

Cuidado, porém, com os valores das medidas. Você já leu meu artigo sobre resoluções, DPI e cia então lembra que os browsers fixam a resolução lógica em 96dpi, independente da resolução física. Então, quando escrevi 144dpi na media query lá em cima, o que estava dizendo é que queria 1.5x o DPI padrão de 96, pegando então telas com pixel ratio 1.5, como vários aparelhos Android.

A medida dppx é nova no CSS e significa o mesmo que o device pixel ratio. Então, poderíamos escrever 1.5dppx e seria equivalente a 144dpi.

Qual valor usar? Realmente preciso de imagens diferentes pra cada resolução?

No meu artigo sobre device pixel ratio, citei os valores que encontramos no mercado hoje:

Você pode escrever uma media query resolution pra cada um desses valores, servindo imagens adaptadas pra cada resolução. Pode até ser uma ideia se você for gerar tudo isso automaticamente (imagens e media queries), mas, na mão, fica inviável.

O que vejo muito comum de se fazer é servir uma imagem em alta resolução para qualquer tela acima de 1dppx. Você pode fazer algo como o pessoal do WordPress que escolheu 120dpi (= 1.25dppx) como valor inicial pra servir imagens retina.

Mas, veja se realmente vale a pena servir imagens diferentes só por causa do DPI. Isso vai ficar bastante complicado nos próximos anos. Pra suportar bem todo tipo de tela, prefira usar texto, fontes, SVG e CSS. Pra fotos, uma técnica que tem ficado popular são as compressive images.

E os browsers?

Todos os browsers modernos suportam a media query resolution, exceto o WebKit. Existem ainda alguns outros problemas, principalmente em dispositivos móveis. Alguns testes feitos em Janeiro/2013:

A conclusão de tudo isso é que precisamos ainda da -webkit-device-pixel-ratio mas já podemos usar a resolution pros outros browsers, sem prefixos. O ideal também é usar a unidade dpi e não dppx, já que o suporte nos browsers ainda é precário.

A media query final

Ta aí então a media query final pra suportarmos telas de alta resolução hoje e no futuro, sem problemas:

@media (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) { 

}

* Imagem que ilustra o post por @bcnbits no Flickr.