डीपी - एसपी और पीएक्स

Question

के बीच संबंध मैं नहीं पूछ रहा हूं कि डीपी, एसपी और पीएक्स के बीच क्या अंतर है।

मैं Google की नई सामग्री डिज़ाइन के आधार पर एक वेबसाइट तैयार कर रहा हूं, सभी माप डीपी (ग्रिड के लिए) और sp (टेक्स्ट के लिए) में हैं। मेरा सवाल यह है कि वे पिक्सल में कैसे अनुवाद करते हैं। मैं 4 से अधिक वर्षों से वेबसाइटों को डिजाइन कर रहा हूं और सभी माप (ग्रिड और फ़ॉन्ट) पिक्सेल में हैं।

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

1. एक शीर्षक 24sp, कितने पिक्सल यह करने के लिए समानता है है? (यह 24 पीएक्स नहीं है, मैंने उनसे मिलान करने की कोशिश की है, यह लगभग 28 पीएक्स है लेकिन मानक मापने वाली प्रणाली होनी चाहिए)।
2. ग्रिड दिशानिर्देश: "सभी घटक 8 डीपी वर्ग बेसलाइन ग्रिड से संरेखित हैं।" - यह कितने पिक्सेल के बराबर है?

1px =? Dp =? Sp डेस्कटॉप या किसी औसत मॉनीटर या मोबाइल डिवाइस पर?

Answer 1

मैं डी पी और एसपी की गूगल की परिभाषाओं, एंड्रॉयड डॉक्स, here और here में पाया जा सकता है जो पढ़ने की सलाह देते।

अद्भुत Designer's Guide to DPI में कुछ उपयोगी जानकारी भी है।

Answer 2

मुझे लगता है कि इस सवाल का जवाब होने जा रहा है:

1px = 1DP = 1sp किसी भी औसत पर नजर रखने या मोबाइल डिवाइस पर।

मैं इसके साथ कैसे आया?

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

किसी को भी कुछ अन्य तार्किक निष्कर्ष है, तो साझा करें

Answer 3

अंगूठे का एक सुरक्षित नियम 1 पीएक्स = 1 डीपी का उपयोग करना है।

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

'ए डी पी 160 dpi पर एक पिक्सेल के शारीरिक आकार से मेल खाती है "(https://developer.android.com/training/multiscreen/screendensities.html#TaskUseD)

160 डीपीआई का अर्थ है::

160 डॉट्स = 1 इंच

यहां इसका कारण

इसलिए:

160 डीपी = 1 इंच (25.4 मिमी)

तो जब Google अनुशंसा करता है कि बटन 48 डीपी की टच करने योग्य लक्ष्य ऊंचाई है, तो वे कह रहे हैं कि उन्हें 0.3 इंच (7.6 मिमी) लंबा होना चाहिए।

तो यह कितना पीएक्स है? अच्छा, यह डिवाइस पर निर्भर करता है।

• iPad मिनी:: 48 डी पी (7.6 मिमी) बटन ऊंचाई के लिए

  उदाहरण 48 पिक्सल क्यों: iPad मिनी स्क्रीन के बारे में 120 मिमी चौड़ा है और 768 पिक्सल का उपयोग करता है जगह को भरने के । इसलिए आपको 7.6 मिमी की बटन ऊंचाई के लिए एक इंच (25.4 मिमी), या 48 पीएक्स लेने के लिए 162 पीएक्स की आवश्यकता है।

• Kindle Fire (7 "): 43 पिक्सल

• Kindle Fire (6"): 50 पिक्स

• iPhone: 48 पिक्सल

• नेक्सस 7: 48 पिक्सल

• नियमित आईपैड: 39 पिक्सल

(मैं गोलाई/नीचे एक छोटा सा हेराफेरी हो सकता है .. मैं 48 49 की तुलना में बेहतर पसंद है!)

स्क्रीन मिमी और सीएसएस उदाहरण के लिए पिक्सल चौड़ाई: मैं सीएसएस पिक्सल स्क्रीन आयामों का उपयोग कर स्क्रीन की चौड़ाई की गणना और विकर्ण लंबाई।

• आईपैड मिनी: 1024 x 768 रिज़ॉल्यूशन और 201 मिमी विकर्ण = 120 मिमी चौड़ाई।
• किंडल फायर 7 ": 858 x 533 रिज़ॉल्यूशन और 178 मिमी विकर्ण = 94 मिमी चौड़ाई
• किंडल फायर 6": 853 x 533 रिज़ॉल्यूशन और 152 मिमी विकर्ण = 81 मिमी चौड़ाई।
• आईफोन: 568 x 320 रिज़ॉल्यूशन और 102 मिमी विकर्ण = 50 मिमी चौड़ाई।
• नेक्सस 7: 960 * 600 रिज़ॉल्यूशन और 178 मिमी विकर्ण = 94 मिमी चौड़ाई।
• आईपैड नियमित: 1024 x 768 रिज़ॉल्यूशन और 246 मिमी विकर्ण = 148 मिमी चौड़ाई।

ध्यान दें कि बटन की पीएक्स ऊंचाई की गणना करने के लिए आपको डिवाइस सीएसएस पीएक्स आयामों का उपयोग करने की आवश्यकता है। ये संख्याएं चश्मे में बताए गए प्रस्तावों के समान नहीं हैं।