Android DP और CSS px के बीच कैसे कनवर्ट करें?

Question

मैं देख रहा हूं कि यह एक नॉब सवाल है, लेकिन यह वास्तव में मुझे भ्रमित करता है।

मैं Google सामग्री डिज़ाइन से दस्तावेज़ों को पढ़ रहा हूँ, साथ ही इसके कुछ कार्यान्वयन css में भी कर रहा हूँ। विनिर्देश एंड्रॉइड में लिखा गया है dp, जबकि सीएसएस कोड pxएक लंबी इकाई के रूप में उपयोग करता है ।

मुझे क्या भ्रमित करता है कि सीएसएस कार्यान्वयन अक्सर विनिर्देश से सटीक मूल्य का उपयोग करता है, उदाहरण के लिए, टोस्ट में होना चाहिए :

सिंगल-लाइन स्नैकबार ऊंचाई: 48 डीपी लंबा

न्यूनतम चौड़ाई: 288 डीपी

2 डीपी गोल कोना

संगत सीएसएस :

min-height: 48px;
min-width: 288px;
...
border-radius: 2px;

मेरी वर्तमान समझ में, एक एंड्रॉइड DPआमतौर पर 160dpi स्क्रीन पर एक पिक्सेल के आकार में प्रदर्शित होता है, जबकि सीएसएस pxको एक दृश्य कोण के रूप में परिभाषित किया गया है। तो क्या कुछ दूरी पर देखने पर pxऐसा ही होता है dp? यदि हां, तो क्या यह एक सामान्य पैटर्न है pxजैसा dpकि सीएसएस में उपयोग किया जाता है, या क्या मैंने सीएसएस कोड को पूरी तरह से गलत समझा है?

मैं पहले Android के विकास के बारे में कुछ नहीं जानता, और एक डिजाइनर नहीं। किसी भी मदद के लिए धन्यवाद।

Comments

मुझे लगता है कि आपको डिवाइस रिज़ॉल्यूशन यानी css-tricks.com/snippets/css/retina-display-media-query के आधार पर मीडिया के प्रश्नों की आवश्यकता है और फिर डिवाइस की DPI के आधार पर, आपको अनुपात द्वारा अपने मूल मानों को स्केल करना चाहिए प्रत्येक संकल्प के लिए। आप em/remहर जगह s का उपयोग करने का विकल्प भी चुन सकते हैं और फिर प्रत्येक रिज़ॉल्यूशन के लिए आधार फ़ॉन्ट आकार को माप सकते हैं।

— डोम

क्या मैं जोड़ सकता हूं कि पीएक्स केवल सीएसएस का उपयोग करने वाली इकाई नहीं है। मापन को विभिन्न प्रकार के पूर्ण और सापेक्ष लंबाई में लिखा जा सकता है। इस लिंक को देखें: w3schools.com/cssref/css_units.asp

— ग्रीष्मकालीन

Answer 1

मुझे लगता है कि स्वीकार गलत है। सीएसएस पीएक्स वास्तव में डिवाइस इंडिपेंडेंट पिक्सेल (डिप) है, और यह सीएसएस में पीपी के रूप में पीएक्स का उपयोग करने के लिए एक सामान्य पैटर्न है।

Answer 2

मेरा मानना ​​है कि आपके सवाल का पूरा जवाब यहां मिल सकता है:

/programming/2025282/difference-between-px-dp-dip-and-sp-in-android

Dp को px में बदलने के लिए आपको उन प्रदर्शन आयामों का ध्यान रखना होगा जिन्हें आप संबोधित कर रहे हैं। डीपीआई जितना अधिक होगा, उतने ही अच्छे पिक्स बनाने के लिए आपको पिक्सेल को एक ही क्षेत्र में रटना होगा और पिक्सेलेशन से बचना होगा :

ldpi: 1 dp = 0.75 px
mdpi: 1 dp = 1 px
hdpi: 1 dp = 1.5 px
xhdpi: 1 dp = 2 px
xxhdpi: 1 dp = 3 px
xxxhdpi: 1 dp = 4 px

उदाहरण के लिए:

CSS या Photoshop में एक 3x3 dp वर्ग होना चाहिए:

2.25x2.25 px - ldpi
3x3 px - mdpi (Samsung ACE, Xperia X8)
6x6 px - xhdpi (Xperia S, Google Nexus 4)
9x9 px - xxxpi (Samsung S4 - S5, HTC One)
12x12 px - xxxhdpi (यह संकल्प योग्य है) अगली पीढ़ी के उपकरणों पर इस्तेमाल किया जाएगा)

उपरोक्त के आधार पर, आपके कैलकुलेटर को इस तरह दिखना चाहिए, XXHDPI स्क्रीन के लिए 3x डीपी गुणक का उपयोग करना:

min-height: 144px;
min-width: 864px;
...
border-radius: 6px;

Android स्वचालित रूप से छवियों को मापता है यदि यह पाता है कि प्रयुक्त डिवाइस रिज़ॉल्यूशन कम है, तो आप XXHDPI को ध्यान में रखते हुए विकसित करने के लिए सुरक्षित हैं, क्योंकि यह बाजार पर आज के उच्च-अंत उपकरणों के बहुमत को संबोधित करता है।

यहाँ आपके लिए काम करने के लिए एक सरल कनवर्टर है: http://androidpixels.net/

Comments

लेकिन क्या android में px cx में px से अलग नहीं है?

— पिन्यिन

एक पिक्सेल का मतलब वही चीज़ है जो किसी सॉफ्टवेयर या स्क्रीन का उपयोग नहीं करता है। यह विभिन्न उपकरणों पर एक बड़े या छोटे डॉट की तरह लग सकता है, लेकिन ऐसा इसलिए है क्योंकि उन स्क्रीन में एक ही स्थान पर अधिक या कम पिक्सेल हो सकते हैं (इस शब्द को PPI - पिक्सेल प्रति इंच कहा जाता है)। मैं मि। ई। उपवोटर के उत्तर को पढ़ने की सलाह देता हूं, इससे आपको सीएसएस में पूर्वनिर्धारित घनत्वों में मदद मिलेगी और आपका काम आसान हो जाएगा।

— मैथ्यू

px पिक्सेल नहीं है। यह एक कोणीय माप है: inamidst.com/stuff/notes/csspx यह उत्तर गलत है।

— जैक्सन

Answer 3

W3C कहता है :

Px इकाई इस प्रकार आपको डिवाइस के रिज़ॉल्यूशन को जानने के लिए ढाल देती है। क्या आउटपुट 96 डीपीआई, 100 डीपीआई, 220 डीपीआई या 1800 डीपीआई है, पीएक्स की एक पूरी संख्या के रूप में व्यक्त की गई लंबाई हमेशा सभी डिवाइसों में अच्छी और बहुत समान लगती है (...)

और यह कहता है:

एक px की उपस्थिति का अंदाजा लगाने के लिए, 1990 के दशक के एक CRT कंप्यूटर मॉनीटर की कल्पना करें: सबसे छोटी बिंदी यह एक इंच (0.25 मिमी) के 1/100 वें या कुछ अधिक के उपायों को प्रदर्शित कर सकती है। Px यूनिट को उन स्क्रीन पिक्सेल से अपना नाम मिला।

यह भी कहता है:

वास्तव में, CSS के लिए आवश्यक है कि सभी मुद्रित आउटपुट (...) में 1px एक इंच का ठीक 1/96 वां होना चाहिए

यह ध्यान में रखते हुए कि डिफ़ॉल्ट स्क्रीन डिवाइस 96dpi के रूप में कॉन्फ़िगर किए गए हैं, यह इस बात पर सबसे अच्छी धारणा है कि ब्राउज़र सीएसएस पिक्सेल की व्याख्या कैसे करते हैं:

96 css-px = ~ 1 inch

और हम जानते हैं कि Android में:

160 dp = ~ 1 inch

इसलिए:

96 css-px = ~ 160 dp
css-px-length = round(dp-length * 96 / 160)

और उसी के अनुसार:

min-height: 29px;
min-width: 173px;
...
border-radius: 2px; /* 2dp is 1.2px from the formula but it wont work */

ठीक है, मैंने सोचा कि जब तक मैंने Google पॉलिमर के टोस्ट आकारों की जांच नहीं की थी:

  min-height: 48px;
  min-width: 288px;
  padding: 16px 24px 12px;
  box-sizing: border-box;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  border-radius: 2px;
  bottom: 12px;
  left: 12px;
  font-size: 14px;

तो यह 1 से 1 रूपांतरण है, और इससे हमें यह मिला कि एंड्रॉइड ब्राउज़र उपयोग करते हैं:

1 css-px = 1 dp

और 96 css-px प्रति इंच का उपयोग डेस्कटॉप और लैपटॉप जैसे अन्य उपकरणों पर किया जाता है।

निष्कर्ष निकालने के लिए: सीएसएस पिक्सल डिवाइस डीपीआई से स्वतंत्र हैं और एंड्रॉइड डिवाइस पर 1 सीएसएस-पीएक्स 1 डीपी के बराबर है।

Answer 4

कोई एक सही उत्तर नहीं है, वास्तव में दो हैं:

1. Google द्वारा अनुशंसित (उदाहरण के लिए सामग्री डिज़ाइन पर उदासी पाठ्यक्रम): एक साधारण रूपांतरण का उपयोग करें, जो कई मामलों में पॉलिमर पुस्तकालय की तरह 1: 1 है। उदाहरण के लिए रेटिना डिस्प्ले के लिए यह सही नहीं है , इसलिए 1: 1 के बजाय, आधिकारिक सामग्री डिज़ाइन गाइड में डिवाइस तालिका में दिए गए घनत्व अनुपात का उपयोग करें ( कुछ लोकप्रिय उपकरणों के लिए अनुपात और विशिष्ट मैट्रिक्स के साथ तालिका ) और इसके लिए उपयुक्त @media क्वेरीज़ प्रदान करें रिज़ॉल्यूशन थ्रेसहोल्ड और संपत्ति, यह मानते हुए कि 1dp एक mdpi डिस्प्ले (160dpi / ppi) के लिए 1px के बराबर है ।

नोट: समग्र विचार: पृष्ठ के तल पर: कई स्क्रीन रिज़ॉल्यूशन थ्रेसहोल्ड (ब्रेकपॉइंट चित्र) के लिए अनुपात की कल्पना करने के लिए कुछ तस्वीर के साथ छवि स्केलिंग

2. यदि आप विशिष्ट उपकरणों के लिए अपने डिजाइन में एक अल्ट्रा स्थिरता चाहते हैं , तो आपको कुछ अधिक शोध और गणना करनी होगी, और अधिक महत्वपूर्ण उपकरण का समर्थन करने के लिए और अधिक @media प्रश्नों का ढेर है जो आप चाहते हैं और कमबैक प्रदान करते हैं। विधि 1 जगह में) उन लोगों के लिए जिनका आप इतना ध्यान नहीं रखते हैं।

इस विषय में अधिक गोता लगाने के इच्छुक लोगों के लिए यहां अधिक विस्तृत जानकारी है, लेकिन इसके पीछे एक स्पष्टीकरण और तर्क है, ऊपर एक पूर्ण उत्तर है :

बात यह है कि "पिक्सेल घनत्व", सामग्री डिजाइन के आधिकारिक गाइड (लेआउट> इकाइयों और माप) के अनुसार, है:

एक इंच में फिट होने वाले पिक्सेल की संख्या।

इसलिए मूल रूप से पिक्सेल घनत्व ppi मान के लिए एक नया नाम है या चूंकि बहुत से लोग इसे एक अलग चीज, एक dpi मान के रूप में नहीं पहचानते हैं।

एक ही गाइड के अनुसार 1dp की परिभाषा:

एक dp 160 के घनत्व के साथ स्क्रीन पर एक भौतिक पिक्सेल के बराबर है । डीपी की गणना करने के लिए:

डीपी = (पिक्सल में चौड़ाई * 160) / स्क्रीन घनत्व

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

सामग्री डिज़ाइन का मुख्य प्रमुख विभिन्न प्लेटफार्मों पर लगातार भौतिक आयामों को बनाए रखना है, जो डेस्कटॉप रिज़ॉल्यूशन, पीपीआई (/ डीपीआई) और सीएसएस पिक्सेल के मुद्दे को उठाता है, जिस स्थिति में आपको एंड्रॉइड के मामले में डीपी की गणना के साथ रहना चाहिए। डिवाइस, और यह सच नहीं है कि अधिकांश स्क्रीन 96ppi हैं (यह एक धारणा है जो सीएसएस के लिए महत्वपूर्ण है), उनमें से एक बड़ा हिस्सा थोड़ा उच्च पीपीआई है, और यदि आप न केवल पारंपरिक डेस्कटॉप को ध्यान में रखते हैं, बल्कि एक नियमित लैपटॉप भी हैं , या गोलियाँ, या "धर्मान्तरित" सतह की तरह, रूपांतरण की आवश्यकता है: वे आमतौर पर 100-130ppi से लेकर होते हैं, उन्होंने कहा कि मैं जिस पल का उपयोग कर रहा हूं वह 127ppi है:

100% = 160ppi -> भौतिक 1 पिक्सेल चौड़ाई = 1dp -> आयत 100x100px = 100x100dp

79% = 127ppi -> भौतिक 1 पिक्सेल चौड़ाई = ca. 0,8dp -> आयत 100x100px = 80x80dp

हालाँकि, dp एक शुद्ध और नई इकाई है जो केवल Android के लिए है, आपको MD लेआउट को अनुकूलित करने के लिए कुछ गणनाएँ करनी चाहिए जो सभी dp में आती हैं। यदि आप कुछ और विचार करना चाहते हैं कि भौतिक अर्थों में विशिष्ट तत्व कितना बड़ा होगा, तो प्रश्न के उद्देश्य के लिए सबसे उपयोगी है विशिष्ट उपकरणों के लिए सामग्री डिजाइन दिशानिर्देशों में आदर्श स्पर्श आकार रेंज मान ** डीपी मूल्य के नीचे है। एक भौतिक एक। ** dp मान बदलता है, लेकिन भौतिक समान रहता है।

समस्या, आपको इकाइयों की गणना करने की आवश्यकता क्यों है, इसे Android API गाइड (पिक्सेल इकाइयों में dp इकाइयों में परिवर्तित) में समझाया गया है और यह अभी भी CSS के साथ स्टाइल किए गए तत्वों के लिए लागू होता है:

कुछ मामलों में, आपको dp में आयामों को व्यक्त करना होगा और फिर उन्हें> पिक्सेल में बदलना होगा।

एक ऐसे एप्लिकेशन की कल्पना करें जिसमें उपयोगकर्ता की उंगली कम से कम 16 पिक्सेल द्वारा स्थानांतरित होने के बाद स्क्रॉल या फ़्लिंग इशारा पहचाना जाता है। बेसलाइन स्क्रीन पर, एक उपयोगकर्ता को 16 पिक्सेल / 160 डीपीआई द्वारा चलना चाहिए, जो इशारा पहचाने जाने से पहले एक इंच (या 2.5 मिमी) के 1/10 वें भाग के बराबर होता है। उच्च-घनत्व वाले डिस्प्ले (240 डीपीआई) वाले डिवाइस पर, उपयोगकर्ता को 16 पिक्सेल / 240 डीपीआई द्वारा चलना चाहिए, जो एक इंच (या 1.7 मिमी) के 1/15 के बराबर होता है। दूरी बहुत कम है और इस प्रकार अनुप्रयोग उपयोगकर्ता के लिए अधिक संवेदनशील दिखाई देता है।

पहले वर्णित पॉलिमर रूपांतरण 1: 1 शायद इस तथ्य के कारण है कि 96 डीपीआई का घनत्व, या यहां तक ​​कि जो मैंने दिया था वह कहीं कम घनत्व में है या (96 डीपीआई के मामले में भी), इसके नीचे भी। ध्यान में रखते हुए कि dp मान एक css स्वीकार नहीं है, यह मान लेना आसान है कि घनत्व अनुपात (0,75- कम, 1,0 मध्यम, और इसी तरह) वह है जो सरलीकरण और कई आकार के लिए उपयोग किया जाना चाहिए स्क्रीन सपोर्ट, जो पहले बताए गए मटीरियल डिजाइन के लिए डिवाइस टेबल में दिखाया गया है। यह भी Android एपीआई गाइड के अध्याय के ऊपर उद्धृत में एक सबसे अच्छा अभ्यास के रूप में उल्लेख किया गया है। और यही कारण है कि पॉलिमर रूपांतरण 1: 1 अच्छा हो सकता है, क्योंकि बहुत सारे उपकरणों का स्तर 1 पर घनत्व अनुपात है।

यदि आप विभिन्न उपकरणों की सूक्ष्म बारीकियों में गोता लगाने का फैसला करते हैं, तो आखिरी दुविधा: सीएसएस पीएक्स पर वापस जाना। यदि आप किसी से पूछताछ नहीं कर रहे हैं, तो एमडी टेबल से केवल घनत्व अनुपात के साथ रहें। लेकिन अगर आप एक पूर्णतावादी हैं, तो सीएसएस पिक्सल और भौतिक आयामों के संबंध के इस क्रॉक्स में W3C कैंडिडेट के पुनर्मूल्यांकन में एक परिपूर्ण (और बहुत सरल स्पष्टीकरण) है :

पूर्ण लंबाई इकाइयों एक दूसरे के संबंध में तय की और कुछ शारीरिक माप के लिए सहारा लेने लगते हैं। आउटपुट वातावरण ज्ञात होने पर वे मुख्य रूप से उपयोगी होते हैं। निरपेक्ष इकाइयाँ भौतिक इकाइयों ('में', 'सेमी', 'मिमी', 'पीटी', 'पीसी', 'क्यू') और दृश्य कोण इकाई ('px') से मिलकर बनती हैं :

हाथ की लंबाई पर पढ़ने के लिए, 1px इस प्रकार लगभग 0.26 मिमी (1/96 इंच) से मेल खाती है।

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

पीएक्स की यह नई परिभाषा (भौतिक आयामों को ध्यान में रखते हुए) सीएसएस पिक्सल और डीपीएस के बीच के अंतर को भरती है और हमें यह सुनिश्चित करने देती है कि सरल माप गणना के द्वारा तथाकथित आउटपुट वातावरण का उपयोग किया जाए , जो इस मामले में एक सुसंगत है (भौतिक अर्थ में) ) एमडी लेआउट , विभिन्न उपकरणों और प्लेटफार्मों पर समान रहता है। इसके अलावा, दोनों W3C और MD दिशानिर्देश पिक्सेल / डॉट्स कवरेज के मुख्य विचार को दर्शाने के लिए निम्न और उच्च-रिज़ॉल्यूशन डिवाइस चित्रों का उपयोग करते हैं - एक उच्च-रिज़ॉल्यूशन वाले डिवाइस पर 1px क्षेत्र द्वारा 1px क्षेत्र को कवर करने के लिए अधिक डिवाइस पिक्सेल (डॉट्स) की आवश्यकता होती है कम-रेस एक पर, जिसका अर्थ है कि रेटिना डिस्प्ले के लिए सीएसएस प्रश्नों में व्यापक रूप से उपयोग किया जाता है वास्तव में वही सामग्री है जो आपको सामग्री डिजाइन और सभी मोबाइल उपकरणों के लिए (लेकिन अधिक थ्रेसहोल्ड के साथ) प्रदान करनी है।

समापन, या तो एमडी घनत्व अनुपात का उपयोग करें जो कि Google द्वारा सर्वोत्तम अनुशंसित अभ्यास है , या यदि आपको सटीक रूप से निर्धारित किया जाता है या आपके डिज़ाइन को भौतिक आकारों के बारे में पूरी तरह से संगत होना चाहिए: विशिष्ट या सामान्य के ppi / dpi मानों का उपयोग करके सटीक रूपांतरण का उपयोग करें उपकरण (जो बहुत ही पागल है), आप आसानी से Google रिसाइज़र ऑनलाइन टूल पर परीक्षण कर सकते हैं क्योंकि वे एमडी गाइड में पहले स्थान पर दिए गए सामान्य थ्रेसहोल्ड का सम्मान करते हैं और अनुपात और प्रासंगिक प्रदर्शन प्रकार के नाम के लिए विभाजन नियम (एक्सलर्ज, मध्यम और इतने पर) ) इसमें लागू किया गया।

तो एमडी रेशियो के साथ स्टिक टेबल से याद रखें कि संदर्भ डीपी बराबर पिक्सेल आकार mdpi रिज़ॉल्यूशन (160) के लिए है और आप अच्छे होंगे।

Comments

-1 इसका अधिकांश उत्तर अनावश्यक और अप्रासंगिक है।

— काई

@maugo अगर आप कुछ अनावश्यक हिस्सों को हटाने के लिए एक संपादन कर सकते हैं तो मुझे यकीन है कि CAI उनके डाउनवोट को हटा देगा और मैं एक upvote भी प्रदान करूंगा।

— DᴀʀᴛʜVᴀᴅᴇʀ

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

— मागो जूल