रेटिना डिस्प्ले मीडिया क्वेरी - सीएसएस-ट्रिक्स

उच्च-रिज़ॉल्यूशन ग्राफिक्स शामिल करने के लिए, लेकिन केवल उन स्क्रीन के लिए जो उनका उपयोग कर सकते हैं। "रेटिना" "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 */ )