स्क्रीन रिज़ॉल्यूशन के आधार पर विभिन्न पृष्ठभूमि छवि?

Question

आपको विभिन्न स्क्रीन संकल्पों पर पृष्ठभूमि छवियों को संभालने का सबसे अच्छा तरीका क्या है?

मैं सबसे लोकप्रिय संकल्पों में से प्रत्येक के लिए एक अलग पृष्ठभूमि बनाने की सोच रहा था और बस Jquery उचित लोड लोड करें। मैं सीएसएस के लिए भी खुला हूं, आप सभी को धन्यवाद :)

Answer 1

उपयोग media queries:

@media (min-width:800px) { background-image: url(bg-800.jpg) } 
@media (min-width:1024px) { background-image: url(bg-1024.jpg) } 
@media (min-width:1280px) { background-image: url(bg-1280.jpg) } 

आप कभी भी हर संभव आकार को कवर करने में सक्षम नहीं होंगे, खासकर जब आप उन सभी उपयोगकर्ताओं पर विचार करते हैं जिनके ब्राउज़र ' टी पूर्ण स्क्रीन, इसलिए इसके लिए आपके डिजाइन को कुछ हद तक flexible होना चाहिए।

Answer 2

"बैकस्ट्रेच" नामक एक jQuery प्लगइन है जिसे पृष्ठभूमि छवि को वेबपृष्ठ के आकार में फिट करने के लिए बनाया गया था। बस एक नज़र here

---

ले तुम सिर्फ स्क्रीन रिज़ॉल्यूशन पाने के लिए फिर तय जो पृष्ठभूमि लोड किया जाएगा चाहते हैं, तो इन कोड मदद मिल सकती है:

var h = screen.height; 
var w = screen.width; 

var BGList = { 
    '1024-768': 'background-url-1.jpg', 
    '1152-864': 'background-url-2.jpg', 
    '1280-600': 'background-url-3.jpg' 
} 

var myBG = BGList[ w+'-'+h ]; 
if (myBG){ 
    document.write("<style> body {background:url('"+myBG+"')} </style>") 
}else{ 
    alert("You have a strange screeen !") //--deal with undefined screen resolution here 
} 

Answer 3

अद्यतन:

पार ब्राउज़र समर्थन के लिए, नीचे मेरा उत्तर "अपनी खुद की रोल" विधि है। पिछले कुछ वर्षों में, हालांकि, इस मुद्दे को हल करने के लिए विकसित कुछ उत्कृष्ट पॉलीफिल हैं। आमतौर पर उन सभी कार्यों को फिर से शुरू करने के बजाए इनमें से किसी एक के साथ जाना अच्छा विचार है। Respond.js बेहतर ज्ञात लोगों में से एक है। बस इसे से लिंक:

<script src="/path/to/respond.js"></script> 

फिर अपने सीएसएस फ़ाइल में अपने मीडिया के प्रश्नों लिखने और आप काम हो गया।

---

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

सीएसएस मीडिया प्रश्नों के अतिरिक्त, मैं बैकअप जावास्क्रिप्ट समाधान रखने पर विचार करता हूं जो व्यूपोर्ट आकार निर्धारित करेगा, फिर बस बॉडी टैग में एक कक्षा जोड़ें। यह उदाहरण केवल संक्षिप्तता की खातिर jQuery का उपयोग करता है:

function setImageClass() { 
    switch(true) { 
     case($(window).width()>600): $("body").removeClass("w200 w400").addClass("w600"); 
     break; 
     case($(window).width()>400): $("body").removeClass("w200 w600").addClass("w400"); 
     break; 
     default: $("body").removeClass("w400 w600").addClass("w200"); 
     break; 
    } 
} 

$(document).ready(function() { 
    setImageClass(); 
}); 

$(window).resize(function() { 
    setImageClass(); 
}); 

Btw, इन आकारों नहीं यथार्थवादी, बस सभी उपकरणों पर आसान परीक्षण के लिए कर रहे हैं। याद रखें, CSS मीडिया क्वेरी, नजरअंदाज कर दिया जाएगा ताकि उन के अलावा, आप कक्षाओं के लिए नियमों को सेट करना है कि जावास्क्रिप्ट सेट की जरूरत है:

.w200 { background:red } 
.w400 { background:orange } 
.w600 { background:yellow } 

हालांकि, अगर आप नहीं टकराने 2 सीएसएस नियम चाहते हैं जब दोनों प्रश्न और जेएस काम करते हैं, तो आपके मीडिया प्रश्नों को समान नामों का उपयोग करना चाहिए (और बाद में रखा जाना चाहिए)। उदाहरण:

@media (min-width:200px) { 
    .w200 { 
     background:red; 
    } 
} 
... 

मैंने इसे क्रिया में दिखाने के लिए एक पहेली डाली। इसमें केवल जावास्क्रिप्ट समाधान शामिल है, लेकिन फिर से, मैं मुख्य समाधान के रूप में मीडिया प्रश्नों का पूर्ण समर्थन करता हूं।Here is the full screen link.