सीएसएस विस्तार?

Question

मेरे पास दो divs हैं जो एक दूसरे के बगल में तैर रहे हैं। मुझे यह पसंद है कि जब आप पोर्ट्रेट मोड में इसे देख रहे हों तो इसकी 100px की चौड़ाई हो और लैंडस्केप में 200 पीएक्स कहें। यह वास्तव में एक मोबाइल डिवाइस पर देखने होता है।

तो लैंडस्केप मोड में जब पोर्ट का विस्तार होगा और पोर्ट्रेट में थोड़ा सा छोटा हो जाएगा।

कोई विचार?

Answer 1

वैसे यह सीएसएस 2 के साथ संभव नहीं है, लेकिन जावास्क्रिप्ट (स्क्रीन आकार आदि को पढ़ने के लिए) के साथ करना संभव होगा।

मुझे यकीन नहीं है कि आप कौन सी तकनीक देख रहे हैं, लेकिन CSS3 आपको CSS3 Media Queries के साथ बिल्कुल वही प्रदान करता है।

CSS3 के साथ आप इस तरह मज़ा सामान है (या आप भी निर्दिष्ट कर सकते हैं चौड़ाई जैसे 200px): अधिक स्पष्टीकरण, या this one के लिए बाहर

/* Portrait */ 
@media screen and (orientation:portrait) { 
    /* Portrait styles here */ 
} 
/* Landscape */ 
@media screen and (orientation:landscape) { 
    /* Landscape styles here */ 
} 

चेक this example page।

EDIT सिर्फ इसलिए कि मुझे यह पृष्ठ आज मिला: - बहुत अच्छा लेखन।

Answer 2

आप सीएसएस मीडिया सुविधा "अभिविन्यास" का उपयोग कर ऐसा कर सकते हैं। इस तरह आप स्क्रीन आकार से असंबंधित स्क्रीन अभिविन्यास के आधार पर शैलियों को निर्दिष्ट कर सकते हैं। आप इस मीडिया फीचर here के बारे में आधिकारिक w3.org परिभाषा पा सकते हैं। developer.mozilla.org पर विनिर्देशों के साथ संयुक्त यह समझाएगा कि यह कैसे काम करता है।

'उन्मुखीकरण' मीडिया सुविधा 'चित्र' जब का मूल्य 'ऊंचाई' मीडिया है:

---

'उन्मुखीकरण' मीडिया सुविधा के बारे में w3.org से उद्धरण सुविधा से 'चौड़ाई' मीडिया सुविधा के मान से से अधिक या बराबर है। अन्यथा 'अभिविन्यास' 'परिदृश्य' है।

developer.mozilla.org से एक नोट/उद्धरण "अभिविन्यास" सुविधा के बारे में:

नोट: यह मूल्य (यानी पोर्ट्रेट या लैंडस्केप) करता नहीं वास्तविक के अनुरूप डिवाइस अभिविन्यास। पोर्ट्रेट ओरिएंटेशन में अधिकांश डिवाइसों पर सॉफ्ट कीबोर्ड खोलना व्यूपोर्ट लंबा होने की तुलना में व्यापक हो सकता है, जिससे ब्राउज़र को पोर्ट्रेट के बजाय लैंडस्केप शैलियों का उपयोग करने का कारण बनता है।

---

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

JSFIDDLE DEMO(दृश्य पोर्ट का आकार बदलने की कोशिश)

यहाँ और आड़े ओरिएंटेशन को प्रभावित करने वाले प्रतिनिधि मीडिया क्वेरी कर रहे हैं।

@media screen and (orientation:portrait) { 
    /* Portrait styles */ 
    /*set width to 100px */ 

} 
@media screen and (orientation:landscape) { 
    /* Landscape styles */ 
    /* set width to 200px*/ 

}