Retina Display Media Query онлайн урок.


Для включения графики с высоким разрешением, но только для экранов, которые могут их использовать. «Retina» - «2x»:

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

Или другие high-res:

/* 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и в случае, если они исправит его, но оставьте его приставка.
  • Вот spec на блоках разрешения .

Пример:

Допустим, у вас было три основных контрольных точки в дизайне. Этот дизайн также имел большую фоновое изображение, и вы хотели, чтобы он выглядел лучше всего на любом экране (сетчатке или нет) и не терял никакой полосы пропускания. Вы настроили 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 */

}