क्या मुझे नई हाई रेस बैकग्राउंड इमेज से मेल करने के लिए .box div का आकार 400px से 400px तक दोगुना करना होगा
नहीं, लेकिन आपको background-size
मूल आयामों से मेल खाने के लिए संपत्ति सेट करने की आवश्यकता है :
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.box{
background:url('images/box-bg@2x.png') no-repeat top left;
background-size: 200px 200px;
}
}
संपादित करें
इस उत्तर में थोड़ा और जोड़ने के लिए, यहाँ रेटिना डिटेक्शन क्वेरी है जिसका मैं उपयोग करता हूँ:
@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) {
}
- स्रोत
एनबी। यह min--moz-device-pixel-ratio:
कोई टाइपो नहीं है। यह फ़ायरफ़ॉक्स के कुछ संस्करणों में एक अच्छी तरह से प्रलेखित बग है और पुराने संस्करणों (फ़ायरफ़ॉक्स 16 से पहले) का समर्थन करने के लिए इसे इस तरह लिखा जाना चाहिए।
- स्रोत
नीचे दिए गए टिप्पणियों में उल्लिखित @LiamNewmarch के रूप में, आप background-size
अपनी शॉर्टहैंड background
घोषणा में शामिल कर सकते हैं :
.box{
background:url('images/box-bg@2x.png') no-repeat top left / 200px 200px;
}
हालाँकि, मैं व्यक्तिगत रूप से शॉर्टहैंड फ़ॉर्म का उपयोग करने की सलाह नहीं दूंगा क्योंकि यह आईओएस <= 6 या एंड्रॉइड में समर्थित नहीं है जो इसे अधिकांश स्थितियों में अविश्वसनीय बनाता है।