क्या मुझे पीटी या पीएक्स का उपयोग करना चाहिए?


160

ptऔर pxCSS में क्या अंतर है ? मुझे किसका उपयोग करना चाहिए और क्यों?

जवाबों:


76

px ≠ पिक्सेल

ये सभी उत्तर गलत प्रतीत होते हैं। अंतर्ज्ञान के विपरीत, सीएसएस में px पिक्सल नहीं है । कम से कम, सरल भौतिक अर्थों में नहीं।

इस लेख को W3C , EM, PX, PT, CM, IN… से पढ़िए , कि कैसे px“जादुई” इकाई सीएसएस के लिए आविष्कार की गई है। pxहार्डवेयर और रिज़ॉल्यूशन से भिन्न होता है। (यह लेख ताजा है, अंतिम अद्यतन 2014-10।)

इसके बारे में सोचने का मेरा अपना तरीका: 1 px is the size of a thin line intended by a designer to be barely visible.

उस लेख को उद्धृत करने के लिए :

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

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

आजकल ऐसे उपकरण हैं जो सिद्धांत रूप में छोटे तेज डॉट्स प्रदर्शित कर सकते हैं (हालांकि आपको उन्हें देखने के लिए एक आवर्धक की आवश्यकता हो सकती है)। लेकिन पिछली शताब्दी के दस्तावेज जो CSS में px का उपयोग करते थे, अभी भी वही दिखते हैं, चाहे कोई भी उपकरण हो। प्रिंटर, विशेष रूप से, 1px की तुलना में बहुत छोटे विवरणों के साथ तेज रेखाओं को प्रदर्शित कर सकते हैं, लेकिन प्रिंटर पर भी, एक 1px रेखा बहुत अधिक दिखती है क्योंकि यह कंप्यूटर मॉनीटर पर दिखेगा। उपकरण बदलते हैं, लेकिन पीएक्स में हमेशा एक ही दृश्य उपस्थिति होती है।

यह लेख इस प्रश्न का उत्तर देने के लिए ptबनाम pxबनाम का उपयोग करने के बारे में कुछ मार्गदर्शन देता है em


तो, क्या मैं iOS और Android पर pxcss में उपयोग कर सकता हूं ? ptdp
GRiMe2D

4
यह एकमात्र सही उत्तर है। उद्धृत w3.org url http से https के रूप में अपडेट किया गया है: https://www.w3.org/Style/Examples/007/units.en.html
hyyou2010

7
thin line intended by a designer to be barely visible. WAT? यह एक जनसांख्यिकी है। पिक्सेल में पिक्सेल == वास्तविक पिक्सेल * डिवाइस पिक्सेल अनुपात। न कम, न ज्यादा। वास्तव में, यह वर्तमान प्रश्न और सीएसएस के साथ काम करने के मामले में मायने नहीं रखता है।
extempl

"(...) और इस तरह कि एक क्षैतिज 1px चौड़ी लाइन को तेज किनारों (कोई एंटी-अलियासिंग) के साथ प्रदर्शित किया जा सकता है:" FALSE। देशी एंड्रॉइड ब्राउज़र (क्रोम नहीं) में 1px ठोस लाइन खोलें, और स्क्रीन पर इसके स्थान के आधार पर लाइन एचडीपीआई उपकरणों पर बुरी तरह धुंधली हो जाएगी।
andreszs

61

यहाँ आपको उनके अंतरों का बहुत विस्तृत विवरण मिला है

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

इसका स्रोत (स्रोत से)

पिक्सेल निश्चित आकार की इकाइयाँ होती हैं जिनका उपयोग स्क्रीन मीडिया (यानी कंप्यूटर स्क्रीन पर पढ़ने के लिए) में किया जाता है। पिक्सेल "चित्र तत्व" के लिए खड़ा है और जैसा कि आप जानते हैं, आपकी स्क्रीन पर एक पिक्सेल एक छोटा "वर्ग" है। अंक पारंपरिक रूप से प्रिंट मीडिया (कुछ भी जो कागज पर मुद्रित किया जाना है, आदि) में उपयोग किया जाता है। एक बिंदु एक इंच के 1/72 के बराबर है। अंक पिक्सेल की तरह होते हैं, इसमें वे निश्चित-आकार की इकाइयाँ होती हैं और आकार में नहीं हो सकती।

13
मुझे वह साइट पसंद है लेकिन यह वास्तव में नहीं समझाता कि% क्या है। 100% क्या? मेरी गाड़ी?
जो फिलिप्स

7
@ जो फिलिप्स - 100% अंतिम माता-पिता तत्व पर आपके द्वारा निर्धारित फ़ॉन्ट-आकार होगा। अगर आपने कहीं भी कोई फॉन्ट-साइज सेट नहीं किया है, तो 100% डिफॉल्ट ब्राउजर फॉन्ट-साइज है (जो कि ज्यादातर ब्राउजर में डिफ़ॉल्ट रूप से 16px है - ट्रफ ब्राउजर ऑप्शंस को बदला जा सकता है)
ईज़ी

3
एक px 1/96 इन का है। अधिकांश डेस्कटॉप मॉनिटर पर यह एक डिवाइस पिक्सेल के अनुरूप होगा। लेकिन अन्य उपकरणों पर, सभी इकाइयों को स्केल किया जा सकता है ताकि एक px डिवाइस पिक्सेल के समान न हो। हालांकि अन्य निरपेक्ष इकाइयाँ समान पैमाने पर जारी रहेंगी "एक में" अभी भी 96 "px" होगा।
थोमसट्रेटर

63
INCORRECT दरअसल, किल्स आर्कियोलॉफर का वह लेख गलत है। pxहै सीएसएस में पिक्सल कम से कम सरल भौतिक अर्थ में नहीं,। WC3 के इस लेख को यह समझाते हुए पढ़ें कि pxयह एक "जादू" इकाई है जिसका आविष्कार पूरी तरह से और सीएसएस द्वारा किया गया है। का अर्थ pxहार्डवेयर और स्क्रीन रिज़ॉल्यूशन से भिन्न होता है।
बेसिल बोर्क

5
यह उत्तर प्रागैतिहासिक गुफा का है, जो इसका है। कृपया इसे संपादित करें
Toskan

55

सीएसएस-ट्रिक्स के इस बेहतरीन लेख पर एक नज़र:

लेख से लिया गया:


pt

माप की अंतिम इकाई जिसे फ़ॉन्ट आकार घोषित करना संभव है वह बिंदु मान (pt) है। बिंदु मान केवल प्रिंट सीएसएस के लिए हैं! एक बिंदु माप की एक इकाई है जिसका उपयोग वास्तविक जीवन की स्याही-ऑन-टाइप टाइपोग्राफी के लिए किया जाता है। 72 प्रयास = एक इंच। एक इंच = एक वास्तविक जीवन इंच की तरह एक-पर-शासक। एक स्क्रीन पर एक इंच नहीं, जो संकल्प के आधार पर पूरी तरह से मनमाना है।

जैसे कि फ़ॉन्ट-आकार के लिए मॉनिटर पर पिक्सेल कैसे मृत-सटीक हैं, कागज पर बिंदु आकार मृत-सटीक हैं। पृष्ठों को प्रिंट करते समय सर्वश्रेष्ठ क्रॉस-ब्राउज़र और क्रॉस-प्लेटफ़ॉर्म परिणामों के लिए, प्रिंट स्टाइलशीट सेट करें और सभी आकारों को बिंदु आकारों के साथ आकार दें।

अच्छे उपाय के लिए, स्क्रीन डिस्प्ले के लिए हम बिंदु आकार का उपयोग नहीं करते हैं (इसके अलावा यह बेतुका है), यह है कि क्रॉस-ब्राउज़र परिणाम बहुत भिन्न हैं:

पिक्सल

यदि आपको ठीक-ठीक नियंत्रण की आवश्यकता है, तो पिक्सेल मान (px) में फोंट का आकार बदलना एक उत्कृष्ट विकल्प है (यह मेरा पसंदीदा है)। कंप्यूटर स्क्रीन पर, यह एक एकल पिक्सेल से अधिक सटीक नहीं मिलता है। पिक्सेल में फोंट को आकार देने के साथ, आप अक्षरश: अक्षर बताने के लिए कह रहे हैं कि वास्तव में ऊंचाई में पिक्सेल की संख्या:

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

पिक्सेल मूल्यों की प्रकृति के कारण, वे कैस्केड नहीं करते हैं। यदि किसी मूल तत्व में 18px पिक्सेल आकार है और बच्चा 16px है, तो बच्चा 16px होगा। हालाँकि, फ़ॉन्ट-आकार सेटिंग्स का उपयोग संयोजन में किया जा सकता है। उदाहरण के लिए, यदि माता-पिता को 16px पर सेट किया गया था और बच्चे को बड़े पर सेट किया गया था, तो बच्चा वास्तव में माता-पिता से बड़ा हो जाएगा। एक त्वरित परीक्षण ने मुझे यह दिखाया:

"बड़े" ने माता-पिता के 16px को 20px, 25% की वृद्धि के साथ टक्कर दी।

पिक्सल ने एक्सेसिबिलिटी और यूएबिलिटी चिंताओं के लिए अतीत में खराब रैप हासिल किया है। IE 6 और नीचे में, पिक्सेल में सेट किए गए फ़ॉन्ट-आकार उपयोगकर्ता द्वारा नहीं बदले जा सकते हैं । इसका मतलब है कि हम हिप युवा स्वस्थ डिजाइनर 12px में टाइप कर सकते हैं और इसे स्क्रीन पर ठीक-ठीक पढ़ सकते हैं, लेकिन जब दांत में थोड़ी देर तक लोग आकार को उछालते हैं तो वे इसे पढ़ सकते हैं, वे असमर्थ हैं। यह वास्तव में IE 6 की गलती है, हमारी नहीं, लेकिन हमें वह मिलता है जो हमें मिलता है और हमें इससे निपटना है।

पिक्सेल में फ़ॉन्ट-आकार सेट करना सबसे सटीक है (और मुझे सबसे संतोषजनक लगता है) विधि है, लेकिन ध्यान रखें कि आपकी साइट पर IE 6 का उपयोग करने वाले आगंतुकों की संख्या और उनकी पहुंच की आवश्यकता है। हम इस बारे में देखभाल करने की आवश्यकता नहीं के खून बह रहा किनारे पर सही हैं।



2
प्रश्न के लिए (ऊपर), यह उत्तर है
ओवरएक्सचेंज

8
गलतpx है नहीं तो कम से कम सरल भौतिक अर्थ में नहीं, सीएसएस में पिक्सेल। WC3 के इस लेख को यह समझाते हुए पढ़ें कि pxयह एक "जादू" इकाई है जिसका आविष्कार पूरी तरह से और सीएसएस द्वारा किया गया है। का अर्थ pxहार्डवेयर और स्क्रीन रिज़ॉल्यूशन से भिन्न होता है।
बेसिल बोर्ख

यह गलत उत्तर है, pt स्क्रीन रिज़ॉल्यूशन के सापेक्ष नहीं है
user151496

17

एक pt एक इंच का 1/72 वां है और एक उपकरण पर प्रदान की जाने वाली किसी भी चीज के लिए एक बेकार उपाय है जो DPI की सही गणना नहीं करता है। यह मुद्रण के लिए एक उचित विकल्प और स्क्रीन पर उपयोग के लिए एक भयानक विकल्प बनाता है।

एक px एक पिक्सेल है, जो ज्यादातर मामलों में स्क्रीन पिक्सेल पर मैप करेगा।

CSS अन्य इकाइयों का एक समूह प्रदान करता है, और आपको जो चुनना चाहिए वह इस बात पर निर्भर करता है कि आप क्या आकार निर्धारित कर रहे हैं।

एक पिक्सेल बहुत अच्छा है अगर आपको छवि से मेल खाने के लिए कुछ आकार देने की आवश्यकता है, या यदि आप एक पतली सीमा चाहते हैं।

फ़ॉन्ट आकार के लिए प्रतिशत महान हैं, यदि आप उन्हें लगातार उपयोग करते हैं, तो आपको उपयोगकर्ता की वरीयता के अनुपात में फ़ॉन्ट आकार मिलते हैं।

जब आप फ़ॉन्ट आकार के आधार पर स्वयं को आकार देना चाहते हैं, तो ईएमएस महान हैं (इसलिए यदि फ़ॉन्ट आकार बड़ा है तो पैराग्राफ व्यापक हो सकता है)

… और इसी तरह।


@ बैसिलबोर्के - इसलिए "ज्यादातर मामलों में"
क्वेंटिन

@ बासिलबोरके - सीएसएस के संदर्भ में, मामले प्रदर्शन प्रकार से भिन्न होते हैं। स्क्रीन पिक्सेल के लिए 1: 1 सीएसएस पिक्सेल होते हैं। (हालांकि इन दिनों थोड़ा कम है इसलिए अल्ट्रा हाई डेंसिटी डिस्प्ले दिया गया है)
क्वेंटिन

3

pt "बिंदु" का एक व्युत्पत्ति (संक्षिप्त नाम) है जो ऐतिहासिक रूप से प्रिंट प्रकार के चेहरों में उपयोग किया जाता था जहां आकार आमतौर पर "अंक" में "मापा जाता था" जहां 1 अंक में एक इंच का 1/72 और लगभग एक जैसा माप होता है बिंदु फ़ॉन्ट आकार में 1 इंच होगा।

px "पिक्सेल" के लिए एक संक्षिप्त नाम है जो एक स्क्रीन या डॉट मैट्रिक्स प्रिंटर या अन्य प्रिंटर या डिवाइस पर एक सरल "डॉट" है जो डॉट फैशन में रेंडर करता है - पुराने टाइपराइटर के विपरीत जो एक निश्चित आकार, ठोस स्ट्राइकर था एक रिबन पर दबाकर चरित्र की एक छाप छोड़ी, इस प्रकार एक निश्चित आकार की छवि छोड़ दी।

बिंदु से निकटता से संबंधित शब्द "अपरकेस" और "लोअरकेस" हैं जो ऐतिहासिक रूप से निश्चित टंकण वर्णों के चयन के साथ करना था, जहां "कैप्टिटल" वर्णों को गैर-कैप्टिटल वर्णों के ऊपर एक बॉक्स (मामले) में रखा गया था जो कि जगह थे नीचे एक बॉक्स में, और इस तरह "कम" मामला।

विभिन्न टाइपोग्राफिक फोंट और आकारों के लिए अलग-अलग बॉक्स (मामले) थे, लेकिन फिर भी उनमें से प्रत्येक के लिए "ऊपरी" और "निचला" मामला था।

एक और शब्द "पिका" है जो फ़ॉन्ट में एक वर्ण का माप है, इस प्रकार एक पिका एक इंच का 1/6 या माप की 12 बिंदु इकाइयों (12/72) का माप है।

सख्ती से माप माप कंप्यूटर पर है 4.233 मिमी या 0.166 इंच जबकि पुराना बिंदु (अमेरिकी) एक इंच का 1 / 72.27 और फ्रेंच 4.512 मिमी (0.177 इंच) है। इस प्रकार माप के बारे में "अनुमानित" का मेरा बयान।

इसके अलावा, कार्यालयों में उपयोग किए जाने वाले टाइपराइटरों में या तो "एलीट" या "पिका" आकार होता है, जहां आकार 10 और 12 अक्षर प्रति इंच होता है।

इसके अतिरिक्त, मानकीकरण से पहले "बिंदु", धातु टाइपोग्राफर "पैर" आकार पर आधारित था, एक वर्ण के मूल पदचिह्न का आकार, और आकार में कुछ हद तक विविध।

ध्यान दें कि एक टंकण "पैर" मूल रूप से एक मृतक प्रिंटर वास्तविक पैर से था। एक टाइपोग्राफिक पैर में 72 पिक्स या 864 अंक होते हैं।

सीएसएस उपयोग के रूप में, मैं पीएक्स या पीटी के बजाय ईएम का उपयोग करना पसंद करता हूं, इस प्रकार सापेक्ष स्थान और आकार के नुकसान के बिना स्केलिंग का लाभ प्राप्त करता हूं।

संपादित करें: केवल पूर्णता के लिए आप एक फ़ॉन्ट ऊंचाई की माप के तत्व के रूप में ईएम (ईएम) के बारे में सोच सकते हैं, इस प्रकार एक 12 वीं फ़ॉन्ट के लिए 1em उस फ़ॉन्ट की ऊंचाई होगी और 2em उस ऊंचाई से दोगुना होगा। ध्यान दें कि 12px फ़ॉन्ट के लिए, 2em 24 पिक्सेल है। SO 10px आम तौर पर एक मानक फ़ॉन्ट का 0.63em है, जो कि 16px = 1em पर "फ़ॉन्ट" मानक फ़ॉन्ट आकार के रूप में "सबसे" ब्राउज़रों का आधार है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.