Za vključitev grafike visoke ločljivosti, vendar samo za zaslone, ki jih lahko izkoristijo. "Retina" je "2x":
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) ( /* Retina-specific stuff here */ )Ali druge visoke ločljivosti:
/* 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 (ne uporabljajte, hranite za potomce)
@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 */ )To je dokaz več v prihodnosti ...
@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 */ )Opombe:
- Super čudna
min--moz-device-pixel-ratioje verjetno napaka, ki bi jo morda želeli vstaviti-moz-min-device-pixel-ratiotudi v primeru, da jo popravijo, vendar jo pustijo vnaprej. - Tukaj je opis o enotah ločljivosti.
Primer:
Recimo, da ste imeli tri glavne točke preloma v oblikovanju. Ta zasnova je imela tudi veliko grafiko v ozadju in želeli ste, da je videti najboljše na katerem koli zaslonu (mrežnici ali ne) in ne izgubljajte pasovne širine. Nastavili bi 6 medijskih poizvedb, po eno za vsako mejno točko in eno za vsako od teh mejnih točk na mrežnici. Potem bi sliko ozadja preglasili do konca.
@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 */ )