Для включення графіки високої роздільної здатності, але лише для екранів, які можуть ними скористатися. “Сітківка” - це “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 */ )Старі речі (не використовувати, зберігати для нащадків)
@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 */ )