CSS के साथ dp (घनत्व स्वतंत्र पिक्सेल) इकाइयाँ क्या हैं?

Question

एंड्रॉइड के लिए, लोग यूआई तत्वों के लिए डीपी (घनत्व स्वतंत्र पिक्सल) माप का उपयोग करने की सलाह देते हैं, और ऐसे कन्वेंशन हैं जो मौजूद हैं जैसे कि 48dpबटन की ऊंचाई के लिए उपयोग करना, आदि।

मैं एक वेब एप्लिकेशन पर काम कर रहा हूं, और मुझे UI डिज़ाइन पर यह कहते हुए बहुत आलोचना मिल रही है कि यह एंड्रॉइड डिज़ाइन मानकों के अनुरूप नहीं है। जाहिर है, मेरा एप्लिकेशन Android Holo थीम के बजाय CSS और HTML का उपयोग करने के बाद से अलग दिखने वाला है, लेकिन मैं फिर भी इसे जितना संभव हो सके अनुरूप बनाना चाहूंगा। हालांकि सीएसएस घनत्व स्वतंत्र माप की अनुमति नहीं देता है।

जब मैं विभिन्न प्रस्तावों और पिक्सेल घनत्वों पर अपने आवेदन का परीक्षण करता हूं, तो यह अच्छा नहीं लगता है, और कभी-कभी, यह अनुपात से बाहर होता है, इसलिए यह कार्यात्मक भी नहीं है। CSS में Android देशी विकास जैसी dp इकाइयाँ नहीं हैं, लेकिन मैं सोच रहा था कि कुछ विकल्प क्या हैं।

क्या मैं किसी तरह जावास्क्रिप्ट घनत्व का उपयोग करके पिक्सेल घनत्व प्राप्त कर सकता हूं और मैन्युअल रूप से सब कुछ उचित रूप से माप सकता हूं? एक वेब ऐप बनाने के लिए सबसे अच्छा तरीका क्या है जो सभी प्रस्तावों / घनत्वों पर अच्छी तरह दिखता है और काम करता है?

Comments

CSS Android पर pxसमान dpहै। CSS3 कल्पना के अनुसार। इकाइयों और मूल्यों पर ।

— omninonsense

Answer 1

http://www.w3.org/TR/css3-values/#lengths

CSS में उपलब्ध निकटतम इकाई व्यूपोर्ट-प्रतिशत इकाइयाँ हैं।

• vw - प्रारंभिक युक्त ब्लॉक की चौड़ाई का 1% के बराबर।
• vh - प्रारंभिक युक्त ब्लॉक की ऊंचाई के 1% के बराबर।
• vmin - vw या vh के छोटे के बराबर।
• vmax - vw या vh के बड़े के बराबर।

केवल मोबाइल ब्राउज़र के बारे में पता है कि इन इकाइयों का समर्थन नहीं करता है ओपेरा है। http://caniuse.com/#feat=viewport-units

Comments

क्या आईओएस में तैनाती करते समय उन इकाइयों को ठीक से प्रदर्शित किया जाता है?

— jmhostalet

@jmhostalet नहीं, यह ब्राउज़र को अनंत लूप में जाने का कारण बनता है क्योंकि व्यूपोर्ट की ऊंचाई गतिशील है।

— रॉकी 1024 24

यह उत्तर गलत है, क्योंकि pxसीएसएस में इकाई (प्रति-सहज रूप से) वास्तव में पहले से ही पिक्सेल घनत्व स्वतंत्र है - "एक सीएसएस पिक्सेल एक पिक्सेल नहीं है", इस बारे में बहुत सारे लेख हैं

— चेसमोस्कल

Answer 2

मैं वर्तमान में स्वीकृत जवाब से असहमत हूं। जैसा कि uber5001 बताता है, एक pxनिश्चित इकाई है, और एंड्रॉइड-स्पेसक के प्रयासों के समान भावना में है dp।

सामग्री की प्रति :

CSS लिखते समय, dp का उपयोग करें जहाँ dp या sp कहा गया है। Dp को केवल Android के लिए विकसित करने में उपयोग करने की आवश्यकता है।

इसके अतिरिक्त

वेब के लिए डिज़ाइन करते समय, dp को px (पिक्सेल के लिए) से बदलें।

Comments

यह उत्तर है। सामग्री युक्ति उद्धृत करने के लिए +1।

— Qix - MONICA WAS ने

MDN से: "इकाई स्क्रीन पर एक भौतिक इंच का प्रतिनिधित्व नहीं करता है, लेकिन 96px का प्रतिनिधित्व करता है। इसका मतलब है कि जो भी वास्तविक स्क्रीन पिक्सेल घनत्व है, उसे 96dpi माना जाता है। अधिक पिक्सेल घनत्व वाले उपकरणों पर, 1in होगा। 1 भौतिक इंच से छोटा। इसी तरह मिमी, सेमी और पीटी पूर्ण लंबाई नहीं है। " developer.mozilla.org/en/docs/Web/CSS/…

— Maciej Krawczyk

सीएसएस इंच और भौतिक इंच 2 अलग-अलग चीजें हैं। स्क्रीन घनत्व की परवाह किए बिना 1 सीएसएस इंच हमेशा 96px है। तो केवल 96 डीपीआई मॉनिटर पर सीएसएस इंच और भौतिक इंच को समान माना जा सकता है।

— मैकीज क्रैसेज़क

@MaciejKrawczyk मैं px में बड़े पैमाने पर असमानता के बारे में आपके विवाद का आधार समझता हूं। मैं इस बारे में बहस कर सकता हूं कि पीएक्स वास्तव में एक निश्चित इकाई कैसे है, और आपके द्वारा इसमें शामिल पैमाने इस आधार सत्य को नहीं बदलते हैं, लेकिन यह एक लाल स्ट्रिंग है। हकीकत यह है कि dp का सुझाव देने के लिए सामग्री युक्ति सीधे px का उपयोग करने के लिए कहती है। यह देखते हुए ब्रैड ने एंड्रॉइड डिज़ाइन मानकों के बारे में पूछा, मैंने विहित प्रदान किया, और इस प्रकार सही, उत्तर दिया।

— राहू

हाल ही में अद्यतन (मई 2018) सामग्री डिजाइन करने के लिए और अधिक गहराई में पिक्सेल घनत्व बताते material.io/design/layout/#pixel-density

— विद्रूप

Answer 3

का उपयोग करें rem।

यह रूट तत्व का फ़ॉन्ट आकार और अन्य UI तत्वों के आकार के लिए एक बहुत अच्छा आधार इकाई है।

यदि कोई समान आकार (सेंटीमीटर में) का उपयोग करता है, तो पाठ और अन्य तत्व मोबाइल पर बहुत बड़े या डेस्कटॉप पर बहुत छोटे होंगे।

यदि कोई समान मात्रा में पिक्सेल का उपयोग करता है, तो पाठ और अन्य तत्व मोबाइल पर बहुत छोटे या डेस्कटॉप पर बहुत बड़े होंगे।

remक्योंकि यह कहते हैं इकाई की मौके पर ही है "अरे, यह कितना बड़ा सामान्य पाठ होना चाहिए।" इस पर अन्य UI तत्वों का आकार लेना एक बहुत ही उचित विकल्प है।

Answer 4

CSS3 में यह कहना अधिक सटीक हो सकता है कि वेब में Android नहीं है px। CSS3 के लिए युक्तिpx यह कहती है:

पिक्सल; 1px, 1in के 1/96 वें के बराबर है

px भविष्य में आप चाहते हैं कि माप हो सकता है।

Comments

मैं यह नहीं देख सकता कि सब कुछ तोड़े बिना यह संक्रमण कैसे होगा। और उसी पूर्ण आकार (सेमी में) का उपयोग करते हुए, कहते हैं, मोबाइल और डेस्कटॉप पर पाठ एक अच्छा प्रतिमान नहीं है।

— कॉन्स्टेंटिन शुबर्ट

और 1in को 96px के रूप में परिभाषित किया गया है। सीएम, जैसे मिमी, पिक्सेल घनत्व पर निर्भर हैं।

— मैकीज क्रैसिक

यो सिमेपर ने px en vez de dp y va bien

— Ivan Paredes

माइंड ब्लो: OOOO

— dwjohnston

Answer 5

CSS3 के रूप में, कोई सीएसएस इकाइयां नहीं हैं जो वास्तव में डिवाइस-स्वतंत्र हैं। पूर्ण लंबाई पर W3C कल्पना देखें । विशेष रूप से, निरपेक्ष इकाइयाँ उनके भौतिक माप से मेल नहीं खा सकती हैं।

यदि भौतिक इकाइयाँ अपने उद्देश्य के लिए सही थीं, तो आप कुछ बिंदुओं का उपयोग कर सकते हैं; अंक डीपीएस के काफी करीब हैं:

1 in = 72 pt
1 in = 160 dp

1 dp = 72 / 160 pt

यदि आप SCSS का उपयोग करते हैं, तो आप pts में लौटने के लिए एक फ़ंक्शन लिख सकते हैं:

@function dp($_dp) {
  @return (72 / 160) * $_dp + pt;
}

और इसका उपयोग करें:

.shadow-2 {
  height: dp(2);
}

Answer 6

रेम इकाइयों पर आधारित एक इंटरफेस के बारे में क्या?

मुझे इस बात की पुष्टि करने के लिए पर्याप्त अनुभव नहीं है, लेकिन मुझे लगता है कि आप मूल तत्व में फ़ॉन्ट-आकार लागू करने के लिए व्यूपोर्ट आकार के आधार पर कुछ गणित कर सकते हैं और संपूर्ण इंटरफ़ेस तदनुसार समायोजित होगा। यह सामान मेरे लिए अभी तक थोड़ा सा जादू टोना है।

Comments

आपको फ़ॉन्ट आकार सेट करने की आवश्यकता नहीं है। मूल तत्व का डिफ़ॉल्ट फ़ॉन्ट आकार आमतौर पर हाथ में डिवाइस के लिए एक बहुत ही उचित विकल्प है।

— कोनस्टेंटिन शुबर्ट

Answer 7

अंकों का उपयोग क्यों नहीं किया जाता है, यह उपकरणों के अनुरूप आकार है। और स्क्रीन के आकार के सापेक्ष है। पारंपरिक प्रकाशन से आने के बाद ज्यादातर लोग इससे परिचित नहीं हैं।

Answer 8

Vw (किसी भी डिवाइस के लिए स्क्रीन की चौड़ाई) और उन्हें के बीच कुछ मिश्रण का उपयोग करने के बारे में क्या? यहां फ़ॉन्ट-आकार आपकी डिवाइस स्क्रीन चौड़ाई के आधार पर, गतिशील रूप से बदल रहा है। अपने मुख्य CSS फ़ाइल में अगले नियम का उपयोग करें:

font-size: calc(100vw * 10 / 375);

(iPhone 6/7/8 की चौड़ाई 375px है, इसे 320px (iPhone5) और आदि में बदलें)

सभी मामलों में यह एकदम सही है। केवल एक माइनस है। यदि आपका लक्ष्य "पिक्सेल परफेक्ट" है, तो आपको डॉट के बाद बड़ी संख्या का उपयोग करने की आवश्यकता है।

उदाहरण: आपका लक्ष्य सभी स्क्रीन पर फ़ॉन्ट-आकार h5: 18px है।

तब आपका आदर्श "उन्हें" होगा:

h5 { 
 font-size: 1.79904em;
 }

पूर्णता के बिना उपयोग 18/10:

h5 { 
 font-size: 1.8em;
 }

Google Chrome के अनुसार आपको 18.0096px मिलता है;