Для включения графики с высоким разрешением, но только для экранов, которые могут ее использовать. «Retina» означает «2x»:
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) ( /* Retina-specific stuff here */ )Или в другом высоком разрешении:
/* 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 */ )Old Stuff (не использовать, оставить для потомков)
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1) ( /* Retina-specific stuff here */ )Это еще одно доказательство будущего ...
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) ( /* Retina-specific stuff here */ )Примечания:
- Супер-странное
min--moz-device-pixel-ratio, вероятно, ошибка, может также захотеться добавить,-moz-min-device-pixel-ratioесли они исправят ее, но оставят ее с префиксом. - Вот спецификация единиц разрешения.
Пример:
Допустим, у вас есть три основных точки останова в дизайне. У этого дизайна также был большой фоновый рисунок, и вы хотели, чтобы он лучше всего смотрелся на любом экране (сетчатке или нет) и не терял пропускную способность. Вы должны настроить 6 медиа-запросов, по одному для каждой точки останова и по одному для каждой из этих точек останова на сетчатке. Затем вы полностью переопределите фоновое изображение.
@media only screen and (min-width: 320px) ( /* Small screen, non-retina */ ) @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px), only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px), only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px), only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px), only screen and ( min-resolution: 192dpi) and (min-width: 320px), only screen and ( min-resolution: 2dppx) and (min-width: 320px) ( /* Small screen, retina, stuff to override above media query */ ) @media only screen and (min-width: 700px) ( /* Medium screen, non-retina */ ) @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px), only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 700px), only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 700px), only screen and ( min-device-pixel-ratio: 2) and (min-width: 700px), only screen and ( min-resolution: 192dpi) and (min-width: 700px), only screen and ( min-resolution: 2dppx) and (min-width: 700px) ( /* Medium screen, retina, stuff to override above media query */ ) @media only screen and (min-width: 1300px) ( /* Large screen, non-retina */ ) @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px), only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 1300px), only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 1300px), only screen and ( min-device-pixel-ratio: 2) and (min-width: 1300px), only screen and ( min-resolution: 192dpi) and (min-width: 1300px), only screen and ( min-resolution: 2dppx) and (min-width: 1300px) ( /* Large screen, retina, stuff to override above media query */ )