5
मेरा विचार है, तो आप एक 200x200 स्प्राइट के साथ शुरू (जिसका अर्थ है डबल संकल्प छवि 400x400 है) यह सोचते है इस:'सीटीना' डिस्प्ले के लिए इस सीएसएस स्प्राइट समाधान के लिए कोई कमी?
.sprite {
background-image:url('1x.png');
background-repeat: no-repeat;
background-size: 200px 200px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.sprite {
background-image:url('2x.png');
}
}
लाइव उदाहरण: http://ov3rkill.com/temp/a5dii52/
मैं थोड़ी देर के निर्धारित करने के लिए कोशिश कर रहा है के लिए संघर्ष किया गया है उच्च संकल्प छवियों को वितरित करने का सबसे अच्छा तरीका (पहले मैंने सभी छवियों को अलग रखा और उन्हें अलग-अलग आकार दिया) और यह स्पष्ट रूप से बहुत आसान लगता है।
क्या कोई भी संभावित कमी देख सकता है? मैं उत्पादन के उपयोग के लिए इसके साथ झुका रहा हूं और अब तक यह काम करता प्रतीत होता है।
मुझे लगता है कि एक दोष यह है कि फोन दोनों छवियों को डाउनलोड करेगा। मीडिया क्वेरी को संसाधित करने के बाद केवल दो अलग-अलग स्टाइलशीट का उपयोग करने के बारे में क्या उपयोग किया जाता है? –