क्या पीएक्स

Question

के बजाय सीएसएस मीडिया प्रश्नों में डीपीआई का उपयोग करने का कोई तरीका है पिक्सेल चौड़ाई और ऊंचाई की संख्या हमेशा पूरी कहानी नहीं बताती है। यह स्क्रीन से आइटम जोड़ने या हटाने के लिए बहुत अच्छा काम करता है, लेकिन सही छवि को सेट करने के लिए बिल्कुल सही नहीं है। एमबीपी पर रेटिना डिस्प्ले के साथ, स्क्रीन के आधे हिस्से में सेट की गई एक ब्राउज़र विंडो में आज की अधिकांश मशीनों की चौड़ाई में पिक्सल की संख्या समान होगी। फिर भी, उच्च डीपीआई दिए जाने पर प्रदर्शित छवियां बहुत छोटी होंगी।

क्या पिक्सेल चौड़ाई और ऊंचाई की संख्या के बजाय डीपीआई के आधार पर छवियों को बदलने का कोई तरीका है?

Answer 1

आप क्या कर सकते हैं या तो:

<link 
    rel="stylesheet" 
    type="text/css" 
    href="/css/retina.css" 
    media="only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)" 
/> 

या

@media only screen and (-moz-min-device-pixel-ratio: 2), 
     only screen and (-o-min-device-pixel-ratio: 2/1), 
     only screen and (-webkit-min-device-pixel-ratio: 2), 
     only screen and (min-device-pixel-ratio: 2) { 
/*use CSS to swap out your low res images with high res ones here*/ 
} 

Answer 2

क्या आप देख रहे हैं डिवाइस पिक्सेल अनुपात है। चूंकि आईफोन जैसी चीजें 320 पीएक्स स्क्रीन की तरह दिखती हैं लेकिन 640 पीएक्स लेआउट (2 का पिक्सेल अनुपात) के साथ। मीडिया प्रश्नों में, "डिवाइस-पिक्सेल-अनुपात" का उपयोग करें। हालांकि मैं अभी भी विक्रेता उपसर्ग का उपयोग करना सुनिश्चित करता हूं।

उस पर एक अच्छा पोस्ट: http://menacingcloud.com/?c=highPixelDensityDisplays

Answer 3

भी <img srcset> और -webkit-image-set सीएसएस समारोह कर रहे हैं, लेकिन वे सफारी/क्रोम/ओपेरा द्वारा केवल समर्थन किया जा लगते हैं। उदाहरण:

<img src="image.png" srcset="image-1x.png 1x, 
    image-2x.png 2x, image-3x.png 3x"> 

background-image: -webkit-image-set(
    url(icon1x.jpg) 1x, 
    url(icon2x.jpg) 2x 
); 

मुझे यकीन नहीं है कि मोइन ज़मान द्वारा स्वीकृत उत्तर में उदाहरण आईई/फ़ायरफ़ॉक्स पर काम करते हैं या नहीं। शायद "न्यूनतम-रिज़ॉल्यूशन" का उपयोग करने की आवश्यकता है:

@media only screen and (min-resolution: 192dpi), 
     only screen and (min-resolution: 2dppx)