Για να συμπεριλάβετε γραφικά υψηλής ανάλυσης, αλλά μόνο για οθόνες που μπορούν να τα χρησιμοποιήσουν. Το «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 */ )