em को px में बदलना Em ↔ Pixels मुफ़्त ऑनलाइन सुरक्षित

आप em को px में क्यों बदलते हैं

स्टाइलशीट किसी शीर्षक पर margin-bottom: 0.75em कहती है, किसी बटन पर padding: 0.4em 0.9em, और पाठ के एक खंड पर 1.3em की line-height। ये अच्छे, लचीले मान हैं, और इनकी कल्पना लगभग असंभव है। वह हाशिया कितने पिक्सेल है? क्या बटन की पैडिंग डिज़ाइन फ़ाइल के 6 px और 14 px से मेल खाती है? पता करने के लिए आप em को px में बदलते हैं: आप उस फ़ॉन्ट आकार से गुणा करते हैं जिसकी ओर em संकेत करता है, और उत्तर उस इकाई में पढ़ते हैं जो डिज़ाइन उपकरण उपयोग करते हैं। यह वह प्रश्न है जो डेवलपर कोड की समीक्षा करते समय, मॉकअप से बिल्ड की जाँच करते समय, स्पेसिंग की समस्या सुलझाते समय या तैयार घटक किसी ऐसे व्यक्ति को सौंपते समय पूछते हैं जो पिक्सेल में सोचता है।

em को बदलना CSS की सबसे पेचीदा इकाई है, क्योंकि उसका कोई निश्चित मान नहीं होता। em वह फ़ॉन्ट आकार है जो मान जहाँ उपयोग हो वहाँ प्रभावी है, या font-size गुण के लिए स्वयं, पैरेंट का। इसलिए 1.5 em एक जगह 24 px और दूसरी जगह 36 px हो सकता है, उसी स्टाइलशीट में, उसी नियम से। इसलिए परिवर्तक अनुमान नहीं लगाता। वह उस फ़ॉन्ट आकार को पूछता है जिसकी ओर em संकेत करता है, उसे उत्तर के बगल में दिखाता है और उसी से गणना करता है। अगर आपको आकार नहीं पता, तो नीचे के खंड समझाते हैं कि उसे अपने ब्राउज़र में कैसे खोजें।

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

सूत्र और आधार

px बराबर em गुणा फ़ॉन्ट आकार

सूत्र एक गुणा है: px = em × आधार। 16 px के आधार के साथ 1.5 em बनता है 24 px, 0.75 em बनता है 12 px और 2 em बनता है 32 px। पृष्ठ परिणाम के बगल में आधार छापता है, इसलिए 1.5 em = 24 px (16 px) जैसी पंक्ति ठीक बताती है कि क्या माना गया। अगर तत्व का फ़ॉन्ट आकार 20 px है, तो 20 टाइप कीजिए, और 1.5 em बनता है 30 px।

अपने ब्राउज़र में आधार खोजना

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

जब आप पृष्ठ नहीं देख सकते

अगर आप पृष्ठ के बिना कोड पढ़ रहे हैं, तो तत्व से ऊपर की ओर फ़ॉन्ट आकारों की कड़ी का पीछा कीजिए: उसका अपना font-size अगर हो, वरना उसके पैरेंट का, और इसी तरह जड़ तक, जो 16 px है जब तक स्टाइलशीट या पाठक ने बदला न हो। जहाँ आकार em में दिया हो वहाँ कड़ी के साथ गुणा कीजिए। यह थकाऊ है, इसीलिए अधिकांश टीमें फ़ॉन्ट आकारों के लिए rem पर बस जाती हैं।

रूपांतरण क्या रखता है और क्या नहीं

यह पाठ के साथ अनुपात रखता है

परिणाम वह पिक्सेल आकार है जिसका प्रतिनिधित्व आपके टाइप किए आधार पर em करता है। em में लिखी जगह या आकार अपने पाठ का अनुसरण करता है, और रूपांतरण दिखाता है कि पाठ के किसी एक विशेष आकार के लिए वह कितना बनता है।

यह पृष्ठ के लिए एक उत्तर नहीं दे सकता

इसमें सावधानी बरतें: em तत्व के अपने फ़ॉन्ट आकार के सापेक्ष है, या font-size के लिए उसके पैरेंट के, जड़ के नहीं। इसलिए वही 1.5 em 16 px के तत्व के भीतर 24 px है और 24 px वाले के भीतर 36 px, और em के भीतर em गुणा होता है। पृष्ठ पर आँकड़ा ख़ाने के आधार के लिए सही है और किसी अन्य के लिए नहीं। अगर आप ऐसी एक संख्या चाहते हैं जो हर जगह टिके, तो rem उसी के लिए है। दोनों की तुलना के लिए rem को px में बदलिए और देखिए कि जड़-सापेक्ष इकाई कैसे स्थिर रहती है।

पूर्णांकन

पूर्ण संख्या वाले आधार से गुणा अधिकांश मानों के लिए सटीक परिणाम देता है। अगर आधार दशमलव हो, जैसे 13.5 px, तो 1.2 em जैसा मान 16.2 px देता है। ब्राउज़र भिन्नात्मक पिक्सेल सँभालते हैं, पर जब आपको पूरे पिक्सेल चाहिए, महीन किनारी रेखा या ग्रिड पर आइकन के लिए, तो सोच-समझकर पूर्णांकित कीजिए और जाँचिए कि कैसा दिखता है।

नेस्टेड em मान कैसे गुणा होते हैं

सूची के भीतर सूची

ऐसा पृष्ठ लीजिए जिसका मुख्य पाठ 16 px है। एक सूची में font-size: 0.875em है, जो 14 px है। उसके भीतर की प्रविष्टियों में भी font-size: 0.875em है, जो 14 × 0.875 = 12.25 px है। प्रविष्टि के भीतर की सूची फिर वही करती है: 10.7 px। तीन स्तर गहरे जाने पर पाठ नन्हा है, और किसी ने तय नहीं किया था कि ऐसा हो। जब आप किसी घटक के लिए em को px में बदलें और उत्तर बहुत छोटा लगे, तो नेस्टिंग देखना पहली चीज़ है।

कड़ी पर चढ़ना

नेस्टेड em का असली पिक्सेल आकार जानने के लिए आधार को नीचे जाते हुए हर मान से गुणा कीजिए: 16 × 0.875 × 0.875 = 12.25। परिवर्तक एक बार में एक क़दम करता है। कड़ी के लिए पहला मान बदलिए, उत्तर को दूसरे का आधार बनाइए और आगे बढ़िए। यह वही गणित है जो ब्राउज़र करता है।

इसे जुड़ते जाने से कैसे रोकें

फ़ॉन्ट आकारों के लिए rem उपयोग कीजिए, ताकि हर आकार जड़ की ओर संकेत करे, और em को स्पेसिंग के लिए रखिए, ताकि पैडिंग और हाशिये अपने तत्व के पाठ का अनुसरण करें। उस संयोजन में कुछ नहीं जुड़ता, और आप जो em मान बदलते हैं वे सदा ऐसे फ़ॉन्ट आकार के सापेक्ष होते हैं जिसे आप तुरंत पढ़ सकते हैं।

आम मान

पृष्ठ के अंत की तालिका

पृष्ठ में उन पिक्सेल मानों की तालिका है जिनसे आम em आँकड़े आपके निर्धारित आधार पर मेल खाते हैं: 0.5 em है 8 px, 0.625 है 10, 0.75 है 12, 0.875 है 14, 1 है 16, 1.125 है 18, 1.25 है 20, 1.5 है 24, 2 है 32, 3 है 48 और 4 है 64। डिफ़ॉल्ट आधार पर ये वही संख्याएँ हैं जो rem की हैं। आधार बदलिए और तालिका उसके साथ बदलती है, जो देखने का अच्छा तरीक़ा है कि em असल में क्या करता है।

दो आधार अगल-बगल आज़माइए

आधार 14 के साथ 1.5 टाइप कीजिए, फिर आधार 20 के साथ। आपको 21 और 30 पिक्सेल मिलते हैं। एक प्रयोग में em और rem का पूरा अंतर यही है: वही आँकड़ा, दो तत्व, दो आकार।

यहाँ em को px में कैसे बदलें

em मान टाइप कीजिए

पहले ख़ाने में em में आकार डालिए। दशमलव स्वीकार हैं, इसलिए 0.714 भी 1 की तरह काम करता है।

वह फ़ॉन्ट आकार सेट कीजिए जिसकी ओर em संकेत करता है

तत्व का फ़ॉन्ट आकार टाइप कीजिए, या उसके पैरेंट का अगर गुण font-size है। अगर पक्का न हो, तो 16 रहने दीजिए और परिणाम को अनुमान मानिए।

पिक्सेल मान पढ़िए

उत्तर तुरंत प्रकट होता है, आधार उसके बगल में दिखता है। इसे अपने नोट में नक़ल कीजिए या डिज़ाइन फ़ाइल से तुलना कीजिए।

ये इकाइयाँ कहाँ से आती हैं

em

em वेब से पुराना है। धातु के टाइप में यह ढले हुए खंड की चौड़ाई था, जिसका नाम बड़े अक्षर M पर पड़ा, और टाइपोग्राफ़र अब भी em डैश और em स्पेस की बात करते हैं। CSS में इसका अर्थ प्रभावी फ़ॉन्ट आकार है, इसीलिए तत्वों के भीतर तत्व रखने पर यह बदलता है।

पिक्सेल और rem

जब डिस्प्ले का पूर्वानुमेय घनत्व रहना बंद हो गया, तो वास्तविक पिक्सेल में मापा पृष्ठ ऐसा पृष्ठ बन गया जो स्क्रीन के तेज़ होने पर सिकुड़ता था। इसलिए CSS पिक्सेल को संदर्भ लंबाई के रूप में फिर परिभाषित किया गया: आरामदेह पढ़ने की दूरी पर दिखता इंच का लगभग 1/96। rem को em के जुड़ते जाने से बचने के लिए जोड़ा गया: यह जड़ तत्व का em है और कभी गुणा नहीं होता। अगर आप दोनों में काम करते हैं, तो दूसरी दिशा में जाने के लिए px को em में बदलिए।

डेवलपर em को px में कब बदलते हैं

डिज़ाइन फ़ाइल से बिल्ड की जाँच

डिज़ाइनर पिक्सेल में फ़ाइल सौंपता है, और कोड em में है। यह जाँचने के लिए कि पृष्ठ मेल खाता है, आप हर घटक के फ़ॉन्ट आकार से em को px में बदलते हैं। 14 px के लेबल और 0.714em 1.429em की पैडिंग वाला बटन 10 px और 20 px निकलना चाहिए, और अगर डिज़ाइन 12 और 24 कहता है, तो उनमें से एक ग़लत है।

स्पेसिंग की समस्या सुलझाना

जब कोई अंतराल बहुत बड़ा या छोटा दिखे, तो कारण आम तौर पर ऐसा em मान होता है जो आपकी अपेक्षा से बड़े या छोटे फ़ॉन्ट की ओर संकेत करता है। इसे तत्व के परिकलित फ़ॉन्ट आकार से बदलना तुरंत बताता है कि समस्या गणित में है या नहीं।

अपरिचित कोड पढ़ना

विरासत में मिली स्टाइलशीटें em मानों से भरी होती हैं जिनके पिक्सेल आकार आपको फिर बनाने पड़ते हैं। सही आधारों के साथ उनमें से मुट्ठी भर मुख्य बदलना आपको डिज़ाइन का नक़्शा देता है।

दस्तावेज़ और परीक्षण लिखना

पृष्ठ का परीक्षण करने वाले लोग जो देखते हैं उसका वर्णन पिक्सेल में करते हैं। जो डेवलपर कहता है कि पैडिंग 0.9em है उसका परीक्षक के लिए कम अर्थ है; 12.6 px का अर्थ है। बदलना दोनों पक्षों को एक-दूसरे को समझने देता है।

em को px में बदलते समय जाल

ग़लत आधार उपयोग करना

सबसे आम त्रुटि। font-size के लिए पैरेंट का आकार उपयोग कीजिए; अन्य सभी गुणों के लिए तत्व का अपना। आधार टाइप करने से पहले गुण जाँचिए।

em में पैरेंट को भूल जाना

अगर पैरेंट का आकार स्वयं em में है, तो आपको कड़ी का पीछा करना होगा। उसे छोटा करने के लिए डेवलपर टूल का परिकलित मान उपयोग कीजिए।

मान लेना कि स्क्रीन वही पिक्सेल दिखाती है

CSS पिक्सेल डिवाइस पिक्सेल नहीं है। उच्च-घनत्व डिस्प्ले पर एक CSS पिक्सेल दो या तीन डिवाइस पिक्सेल हो सकता है। रूपांतरण CSS पिक्सेल देता है, वह इकाई जिसे डिज़ाइन उपकरण और स्टाइलशीट साझा करते हैं।

उत्तर को वादा समझना

अगर पाठक पाठ बड़ा करता है या घटक किसी अन्य फ़ॉन्ट आकार के साथ दोबारा उपयोग होता है, तो पिक्सेल बदलते हैं, जैसा उन्हें होना चाहिए। बदली हुई संख्या एक स्थिति का वर्णन करती है, सबका नहीं।

बदलने से पहले लोग जो प्रश्न पूछते हैं

1 em कितने पिक्सेल है?

उतने जितना प्रभावी फ़ॉन्ट आकार: डिफ़ॉल्ट पर साधारण मुख्य पाठ के लिए 16 px, 24 px के तत्व के भीतर 24 px।

2 em कितने पिक्सेल है?

प्रभावी फ़ॉन्ट आकार का दोगुना। 16 px पर वह 32 px है।

मेरा ब्राउज़र कुछ अलग क्यों दिखाता है?

तत्व का असली फ़ॉन्ट आकार आपके टाइप किए आधार से भिन्न है। डेवलपर टूल में परिकलित फ़ॉन्ट आकार पढ़िए।

क्या em और rem एक ही हैं?

नहीं। em तत्व के सापेक्ष है, rem जड़ के।

क्या मेरी संख्या अपलोड होती है?

नहीं। गणित आपके ब्राउज़र में चलता है और कुछ कहीं नहीं भेजा जाता।

मैं वापस कैसे जाऊँ?

px से em के साथ, जो गुणा की जगह भाग देता है।

वे आदतें जो em स्टाइलशीट को समझने योग्य रखती हैं

आधार पर टिप्पणी कीजिए

padding: 0.75em 1.25em; /* 12px 20px at 16px */ जैसी पंक्ति में कुछ अक्षर लगते हैं और अगले पाठक को एक रूपांतरण से बचाती है। यह दर्ज करती है कि आपने कौन-सा आधार माना।

प्रति घटक एक बार फ़ॉन्ट आकार सेट कीजिए

घटक का फ़ॉन्ट आकार उसके जड़ तत्व पर परिभाषित कीजिए, और भीतर उसे em से संदर्भित कीजिए। तब घटक के हर मान का आधार समान है, और आप उसके सामने भरोसे के साथ em को px में बदल सकते हैं।

स्पेसिंग के लिए em, टाइप के लिए rem रखिए

यह वह विभाजन है जिस पर अधिकांश स्टाइलशीटें बसती हैं, और यह गणित सरल रखता है। स्क्रीन के सापेक्ष आकारों के लिए px से vw और vw से px उपकरण हैं।

अलग पाठ आकार पर परखिए

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

अटपटे मामलों के लिए एक तरीक़ा

बाहर से भीतर की ओर काम कीजिए

जब कोई घटक दूसरों के भीतर गहरा हो और उसके em मान उलझे दिखें, तो उस सबसे बाहरी तत्व से शुरू कीजिए जिसका आकार आप जानते हैं और भीतर की ओर काम कीजिए, एक बार में एक स्तर बदलते हुए। चलते-चलते हर पिक्सेल आकार नोट में लिखिए। दो-तीन स्तरों के बाद पूरी कड़ी काग़ज़ पर है, और आप ठीक देख सकते हैं कि कोई चौंकाने वाली संख्या कहाँ से आती है। इसमें एक मिनट लगता है और एक घंटे के अनुमान की जगह लेता है।

तय कीजिए कि सरल करना है या नहीं

अगर किसी लेआउट को समझने के लिए आपको चार स्तरों से होकर em को px में बदलना पड़ता है, तो स्टाइलशीट आपसे कुछ कह रही है। फ़ॉन्ट आकारों को rem में ले जाने पर विचार कीजिए, ताकि हर एक जड़ की ओर संकेत करे, और केवल स्पेसिंग को em में छोड़िए। पृष्ठ वैसा ही दिखेगा और अगले साल पढ़ने में कहीं आसान होगा।

संबंधित परिवर्तक

उपकरणों का वही परिवार पड़ोसी रूपांतरणों को ढकता है। em पर लौटने के लिए px से em उपयोग कीजिए। जड़ के सापेक्ष आकारों के लिए px से rem और rem से px हैं, और स्क्रीन के सापेक्ष आकारों के लिए px से vw और vw से px। उसी स्टाइलशीट के रंगों के लिए HEX से RGB और RGB से HEX संकेतन सँभालते हैं।

एक हल किया उदाहरण

मान लीजिए आप बटन घटक की समीक्षा कर रहे हैं। लेबल 14 px का है, CSS में padding: 0.714em 1.429em है और आइकन तथा लेबल के बीच 0.5em का अंतराल। आप आधार के रूप में 14 टाइप करते हैं, फिर 0.714 और 10 px पढ़ते हैं, 1.429 और 20 px पढ़ते हैं, 0.5 और 7 px पढ़ते हैं। डिज़ाइन फ़ाइल 10, 20 और 8 कहती है। तीन में से दो मेल खाते हैं, इसलिए आप अंतराल देखते हैं: 14 के आधार पर 8 px 0.571 em होता, और किसी ने उसे 0.5 में पूर्णांकित कर दिया। आप समीक्षा में उसे उठाते हैं, और सुधार एक संख्या का है।

एक संक्षिप्त जाँच-सूची

बदलने से पहले

वह फ़ॉन्ट आकार खोजिए जिसकी ओर em संकेत करता है, डेवलपर टूल से या कोड में फ़ॉन्ट आकारों की कड़ी से।

बदलते समय

em मान टाइप कीजिए, आधार सेट कीजिए और पिक्सेल पढ़िए, परिणाम के बगल में दिखे आधार को नोट करते हुए।

बदलने के बाद

डिज़ाइन फ़ाइल से तुलना कीजिए। अगर संख्याएँ भिन्न हों, तो कोड पर शक करने से पहले आधार जाँचिए।

आम ग़लतियाँ

बिना जाँचे 16 उपयोग करना

यह तभी सही है जब तत्व का फ़ॉन्ट आकार 16 px हो।

em और rem को गड्डमड्ड करना

वे एक-से दिखते हैं और अलग व्यवहार करते हैं। हर एक के लिए सही पृष्ठ उपयोग कीजिए।

यह भूल जाना कि em जुड़ता जाता है

नेस्टेड तत्व के भीतर का मान उस आकार के सापेक्ष है जिसे आपने शायद देखा न हो। कड़ी का पीछा कीजिए।

आपकी संख्याएँ आपके उपकरण पर रहती हैं

गणना स्थानीय रूप से होती है। आपके मान आपके अपने ब्राउज़र द्वारा उपयोग होते हैं और कुछ कहीं नहीं भेजा जाता। बाद में मिटाने को कुछ नहीं और बनाने को कोई खाता नहीं। em को px में बदलने का यही सादा तरीक़ा है।

सारांश

यहाँ em को px में बदलने के लिए em में आकार और वह फ़ॉन्ट आकार टाइप कीजिए जिसकी ओर वह संकेत करता है, और सूत्र px = em × आधार से तुरंत पिक्सेल में परिणाम पढ़िए। रूपांतरण उस प्रभावी फ़ॉन्ट आकार के सापेक्ष अनुपात रखता है जहाँ मान उपयोग हुआ। यह पृष्ठ के लिए एक उत्तर नहीं दे सकता: em तत्व के अपने, या font-size के लिए पैरेंट के, सापेक्ष है, इसलिए वही 1.5 em 16 px के तत्व के भीतर 24 px है और 24 px वाले के भीतर 36 px, और em के भीतर em गुणा होता है। ऐसी एक संख्या के लिए जो हर जगह टिके, rem उपयोग कीजिए। कुछ अपलोड नहीं होता।