2013-02-26 28 views
14

मैं अब मोबाइल वेबसाइट कर रहा हूं और CSS3 मीडिया प्रश्नों का उपयोग करके विभिन्न उपकरणों को लक्षित करने की कोशिश कर रहा हूं।CSS3 मीडिया क्वेरी में स्वचालित रूप से डिवाइस-चौड़ाई के बराबर शरीर की चौड़ाई कैसे बनाएं?

@media screen and (max-width:320px) { 
body { 
    width: 320px; 
} 
/* some other style */ 
} 

आप देख सकते हैं, मैं स्पष्ट रूप से शरीर चौड़ाई सेट करने के लिए यकीन है कि यह चौड़ाई है, जो 920px है मैं अपने सामान्य सीएसएस में डेस्कटॉप के लिए निर्धारित प्रदर्शित नहीं करता है बनाने के लिए: मेरे कोड का एक हिस्सा इस प्रकार है । मैं सोच रहा हूं कि क्या कोई तरीका है कि शरीर की चौड़ाई डिवाइस की चौड़ाई में स्वचालित रूप से सेट की जा सकती है और जब भी मैं नया @media बनाता हूं तो मुझे इसे मैन्युअल रूप से सेट करने की आवश्यकता नहीं होती है।

वैसे, मैं अपने head टैग के अंदर निम्नलिखित कोड जोड़ें:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 
+3

कुछ' चौड़ाई के साथ कुछ गलत है? – cimmanon

+0

'चौड़ाई: 100%' ऐडसेंस उत्तरदायी विज्ञापन इकाइयों के लिए काम नहीं करता है ... आकार को परिभाषित करना चाहिए – Jess

उत्तर

13

बस width: auto;

अंतर width: 100%;width: auto; के बीच हैं और उसका उपयोग 100% के लिए बाहरी चौड़ाई 100% + padding-left + padding-right है, भीतर है 100%width: auto की बाहरी चौड़ाई 100% है, आंतरिक चौड़ाई 100% - padding-left - padding-right है और केवल displayblock है और float सेट नहीं है (और साफ़ किए बिना कोई फ़्लोटेड तत्व पहले नहीं है)।

+0

धन्यवाद, आदमी! एक और सवाल, क्योंकि मैंने बॉडी टैग के अंदर सभी आइटम चौड़ाई को प्रतिशत से सेट किया है, जब मैं ज़ूम करता हूं, तो ऐसा लगता है कि उन वस्तुओं की चौड़ाई अभी भी वही है, लेकिन मैं जो करना चाहता हूं वह भी उनकी चौड़ाई को ज़ूम करने के लिए है, मैं इसे कैसे प्राप्त कर सकता हूं? – chaonextdoor

+0

आप निश्चित मूल्य के लिए केवल 'न्यूनतम-चौड़ाई' संपत्ति सेट कर सकते हैं। 'न्यूनतम चौड़ाई: 320 पीएक्स;'। न्यूनतम स्वीकृत आकार के रूप में इसे सबसे छोटे समर्थित '@ मीडिया' आकार के लिए सेट करें। आप किसी भी तत्व के लिए 'न्यूनतम-चौड़ाई' भी सेट कर सकते हैं, लेकिन यह अच्छी प्रथा है कि यह हमेशा शरीर के लिए सेट की जाती है क्योंकि फ्लोट किए गए तत्वों को अपनी स्थिति बदलनी चाहिए। –

+0

हमेशा काम नहीं करता है। उदाहरण के लिए यदि आप इसका उपयोग कर बूटस्ट्रैप पॉपओवर चौड़ाई सेट करने का प्रयास करते हैं। चौड़ाई का प्रयोग करें: 100vw; @ sh3nan1gans –

28

तुम भी उपयोग कर सकते हैं

width: 100vw; 

कि व्यूपोर्ट की चौड़ाई के 100% के तत्व सेट हो जाएगा। आप जोड़ने से पहले अपने ब्राउज़र की अनुकूलता जांच करना चाह सकते: व्यूपोर्ट आकार पर http://caniuse.com/#search=vw

और जानकारी: 100% `: https://css-tricks.com/viewport-sized-typography/

+1

से नीचे यह आधुनिक ब्राउज़र में सीएसएस का उपयोग करते समय मैंने देखा सबसे अच्छी युक्तियों में से एक है। यह बेहद उपयोगी है और कई जटिल समस्याओं को हल कर सकता है। उदाहरण के लिए, जब आपके पास स्क्रॉलिंग div है जो व्यूपोर्ट से बड़ा है और आप इस div के अंदर बच्चे div को दृश्य पोर्ट चौड़ाई के प्रतिशत तक सीमित करना चाहते हैं। बहुत बहुत धन्यवाद। – Sunil

संबंधित मुद्दे