За включване на графики с висока разделителна способност, но само за екрани, които могат да се възползват от тях. „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 */ )Стари неща (не използвайте, пазете за потомство)
@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 */ )