Com a linha cada vez maior de produtos de exibição de retina atualmente apenas da Apple, é hora de você garantir que seu tema WordPress esteja bonito nesses dispositivos. Neste artigo, examinarei as várias opções diferentes que você tem para adicionar suporte de retina aos seus temas.
O que é Retina?
Retina Display é um nome de marca usado pela Apple para telas de cristal líquido que têm uma densidade de pixels alta o suficiente para que o olho humano não perceba a pixelização a uma distância de visualização típica ( http://en.wikipedia.org/wiki/Retina_Display ).
ENTÃO, COMO ISSO AFETA AS IMAGENS EM SEUS TEMAS?
Um monitor típico é de 72ppi ou pixels por polegada, uma tela Retina, por outro lado, varia de 135-300ppi. O que isso significa para as imagens em seu tema, ver uma imagem de 72ppi em seu monitor LCD padrão parece tudo bem, mas puxe essa mesma imagem para um dispositivo de exibição Retina e ela parecerá desfocada para o inferno. Como remediamos esta situação? Leia meu amigo…
1. CSS3 > Imagens
Provavelmente, a opção mais óbvia é usar CSS3, com o suporte do navegador ficando cada vez melhor a cada dia — usar propriedades CSS3 é fácil. Coisas como gradientes de fundo linear, raio de borda, sombra de caixa e sombra de texto juntamente com RGBA quando usados
2. @2x Imagens
@2x, O QUE é isso!? Pense em imagens de 72ppi, o padrão atual como @1x que fica ótimo em telas normais. Agora, com telas Retina, sua resolução é basicamente o dobro, é aí que @2x entra em jogo, faz sentido, certo? Basicamente @2x é o padrão para imagens e gráficos Retina que foi implementado pela Apple.
Quando colocado em uso, você teria seu arquivo de 72ppi algo como logo.png e outro [email protected], bem simples.
COMO VOCÊ SERVE ESSA IMAGEM @2X AOS DISPOSITIVOS DE RETINA?
Um incrível script de código aberto Retina.js torna incrivelmente fácil servir imagens de alta resolução para dispositivos Retina. Se uma variante de alta resolução dessa imagem existir neste caso [email protected] o script irá automaticamente trocar aquela imagem no local. Simples assim.
Se você estiver usando imagens de plano de fundo em CSS, precisará usar uma consulta de mídia simples, algo como:
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min–moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
#menu-icon { background-image: url(../images/icons/[email protected]);}
}
3. Elementos img embutidos
Digamos que você tenha uma grande galeria de fotos, e fazer duas versões de cada imagem está fora de questão. Outro ótimo script de código aberto é o Foresight.js , ele dá ao seu tema a capacidade de dizer se o dispositivo do usuário é capaz de visualizar imagens de alta resolução antes de ser solicitada pelo servidor. Ele também verifica se o dispositivo do usuário atualmente possui uma conexão de rede rápida o suficiente para imagens de alta resolução. Dependendo da tela do dispositivo e da conectividade de rede, o foresight.js solicitará a exibição da imagem apropriada.
4. Fontes de ícones
As fontes de ícones são simplesmente incríveis, infinitamente escaláveis, podem ser alteradas para qualquer cor, têm cortes transparentes, alteram a opacidade, animam com CSS3 e muito mais! Existem algumas soluções pagas e de código aberto por aí. Pessoalmente, prefiro o pacote Font Awesome de código aberto, existem mais de 220 ícones atualmente, é totalmente gratuito para uso comercial e é muito fácil de usar.
Então, o que você está esperando? Comece a aplicar essas práticas hoje!