Оптимизация css для retina дисплеев

Информация не новая, но для заметки оставляю


@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

но лучше:

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) { ... }

 

другие разрешения

 

/* 1.25 dpr */ @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){ /* Retina-specific stuff here */ }
/* 1.3 dpr */ @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi){ /* Retina-specific stuff here */ }
/* 1.5 dpr */ @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){ /* Retina-specific stuff here */ }

 






У данной записи пока нет ниодного комментария