डिवाइस स्वतंत्र इकाइयों में सीएसएस चौड़ाई/ऊंचाइयों को परिभाषित करना?

Question

मेरे पास एक div है और मैं यह पता लगाने की कोशिश कर रहा हूं कि डिवाइस डिस्प्ले घनत्व के बावजूद स्क्रीन स्पेस की उसी मात्रा पर कब्जा करने के लिए इसे कैसे प्राप्त किया जाए।

उदाहरण के लिए, मान लें कि मेरे पास दो डिवाइस हैं जो प्रत्येक 5 इंच चौड़े हैं। पहले डिस्प्ले में डिवाइस-पिक्सेल-अनुपात = 1 होता है, और दूसरे में डिवाइस-पिक्सेल-अनुपात = 2 होता है।

Device 1: 5 inches wide, device-pixel-ratio=1 
Device 2: 5 inches wide, device-pixel-ratio=2 

तो दूसरे डिवाइस में एक ही स्थान पर पैक किए गए दो बार पिक्सल हैं।

मेरे div शैली:

.myDivStyle { 
    width: 100px; 
    height: 50px; 
} 

अगर मैं सही ढंग से समझ, डिवाइस 2 डिवाइस 1.

अगर ऐसी बात है पर के रूप में आधा चौड़ाई/ऊंचाई पर div रेंडर करने के लिए प्रकट होता है, वहाँ है डिवाइस-स्वतंत्र इकाई में हमारी चौड़ाई/ऊंचाई को परिभाषित करने का एक तरीका? या डिवाइस-पिक्सेल-अनुपात विशेषता की जांच करने के बाद हमें पेज लोड आदि पर मैन्युअल रूप से हमारी सभी शैलियों को स्केल करना होगा?

की तरह आप पिक्सल के बजाय प्रतिशत के साथ काम करने की जरूरत यह और अधिक लगता है आप

Answer 1

धन्यवाद। तो यह आपकी स्क्रीन की "प्रतिशत" राशि का उपयोग करेगा

.myDivStyle { 
    width: 50%; 
    height: 25%; 
} 

यह पिक्सल की मात्रा के साथ समस्या का समाधान करेगा। यदि आप आईफोन और एंड्रॉइड की स्क्रीन के साथ काम करते हैं, तो यह समस्या को हल करेगा, क्योंकि वे दो पूरी तरह से अलग संकल्पों का उपयोग करते हैं। उदाहरण के लिए, मेरा मानना ​​है कि आईफोन 320 का उपयोग करता है .. कुछ, जबकि मेरा स्वयं का सैमसंग गैलेक्सी उपयोग करता है, मुझे लगता है कि 480 कुछ है। (सच्चे मूल्यों को न करें)

Answer 2

em इकाई का उपयोग कर अपने सीएसएस आकार को फिर से परिभाषित करना अच्छा होगा।

इस संदर्भ में कुछ अच्छे लिंक। कृपया जांच करें इन

1. w3.org
2. w3.org
3. css-tricks

सभी ऊपर दिए गए लिंक से आग्रह करता हूं कि, em मामलों में सबसे अच्छा उपयुक्त है जब आप अपने दस्तावेज़ उपकरणों की व्यापक रेंज पर अच्छी तरह से व्यवहार करने के लिए चाहते हैं ।

Answer 3

उपकरणों के अधिकांश निम्नलिखित 3 प्रस्तावों 1) वीजीए के HVGA-आधा (320 x 240) 2) WVGA- विस्तृत वीजीए (800x 480) के दायरे में आ जाएगा - लगभग 1.5 HVGA 3) HVGA 2x के समय - (640 X 960) - IPHONE 4 इस प्रस्ताव से तीन प्रस्तावों के लिए

लिखें अलग सीएसएस फ़ाइलों

@Media screen and (min-width: 320px) and (max-width: 480px){ 
/* css files here*/ 
} 

या

@Media screen and (min-device-pixel-ratio: 2) 
{/* css files here*/ 

} 

द्वारा उपयोग करता

अन्य संकल्पों के साथ ऐसा ही करें। एक रिजोल्यूशन में बनाए गए एक सीएसएस वर्ग को एक पूर्ण दृश्य प्राप्त करने के लिए सभी तीन प्रस्तावों में चिपकाया जाना चाहिए।इस तरह से आप एक आदर्श डिवाइस विशिष्ट शैली का प्रदर्शन कर सकते हैं