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

आपको rem को px में बदलने की ज़रूरत क्यों है

आप स्टाइलशीट खोलते हैं और कार्ड पर padding: 2.25rem और कैप्शन पर font-size: 0.8125rem देखते हैं। वे अच्छे मान हैं, उस तरह लिखे गए जैसे आधुनिक CSS लिखा जाना चाहिए, और पहली नज़र में आपको कुछ नहीं बताते। स्क्रीन पर वह कार्ड की पैडिंग कितनी बड़ी है? क्या कैप्शन पठनीय होगा? क्या वह उस डिज़ाइन फ़ाइल के 36 px और 13 px से मेल खाता है जो आपको सौंपी गई? उत्तर देने के लिए आप rem को px में बदलते हैं: आप रूट फ़ॉन्ट आकार से गुणा करते हैं और उत्तर उस इकाई में पढ़ते हैं जो डिज़ाइन उपकरण उपयोग करते हैं। यह सामान्य दिशा का उलटा है, और वही है जो आप कोड पढ़ते समय, मॉकअप को बिल्ड से जाँचते समय या पिक्सेल में सोचने वाले को लेआउट समझाते समय करते हैं।

रूपांतरण आसान है; जो इसे पृष्ठ के लायक़ बनाता है वह आधार है। rem कोई आकार नहीं है, वह आकार का गुणज है, रूट तत्व का फ़ॉन्ट आकार। जिस ब्राउज़र को किसी ने अन्यथा नहीं कहा उसमें वह आकार 16 px है, इसलिए 1 rem 16 px है, 2.25 rem 36 px है और 0.8125 rem 13 px है। पर रूट को स्टाइलशीट बदल सकती है, और पाठक उसे ब्राउज़र में बदल सकता है, और तब पृष्ठ का हर rem मान उसके साथ खिसकता है। इसलिए पृष्ठ आधार माँगता है और उसे उपयोग करता है, छिपाने की जगह।

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

सूत्र और आधार

px बराबर rem गुणा आधार

सूत्र एक गुणा है: px = rem × आधार। 16 px के सामान्य आधार के साथ 1.5 rem 24 px बन जाता है, 0.75 rem 12 px बन जाता है और 4 rem 64 px बन जाता है। पृष्ठ परिणाम के बग़ल में आधार छापता है, इसलिए 1.5 rem = 24 px (16 px) जैसी पंक्ति बताती है कि क्या मान लिया गया था और आप तुरंत देख सकते हैं कि वह आपकी परियोजना से मेल खाता है या नहीं।

अपना आधार खोजना

स्टाइलशीट में html या :root पर font-size सेट करने वाला नियम खोजिए। अगर कोई नहीं है, तो आधार ब्राउज़र का डिफ़ॉल्ट 16 px है। अगर है, जैसे 62.5%, तो 16 का वह प्रतिशत लीजिए: 62.5% देता है 10 px। ब्राउज़र के डेवलपर टूल में आप रूट तत्व चुनकर उसका गणना किया फ़ॉन्ट आकार भी पढ़ सकते हैं, जो आधार क्षेत्र में डालने की संख्या है।

जब रूट आकार तरल हो

कुछ साइटें clamp व्यंजक से रूट आकार को विंडो के साथ बढ़ाती हैं। तब 1 rem का कोई एकल पिक्सेल मान है ही नहीं: वह फ़ोन पर 15 px है और चौड़े मॉनिटर पर 18 px। उस स्थिति में कोई भी रूपांतरण एक स्नैपशॉट है। जिस चौड़ाई की आपको परवाह है उस पर दिखता आधार टाइप कीजिए, और समझिए कि उत्तर केवल उसी चौड़ाई पर मान्य है।

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

यह अनुपात रखता है

एक rem वही है जो रूट फ़ॉन्ट आकार है, इसलिए rem में लिखा लेआउट अपनी बनावट रखता है जब वह आकार बदलता है। जब आप rem को px में बदलते हैं, तो पिक्सेल मान वही अनुपात है जो एक विशेष आधार के लिए ठोस बनाया गया। दो आकारों के बीच का अनुपात, उदाहरण के लिए 1 rem के मुख्य पाठ पर 2 rem का शीर्षक, आप उसे कैसे भी बदलें नहीं बदलता, और अच्छा लेआउट उसी अनुपात पर निर्भर करता है।

यह आपके पाठक की सेटिंग नहीं जान सकता

संख्या पूरी तरह आधार पर निर्भर है। अगर पाठक ने अपने ब्राउज़र का डिफ़ॉल्ट पाठ आकार बढ़ाया है, जो कई लोग करते हैं और उन्हें हक़ है, तो उनके लिए 1 rem 16 px नहीं है, और आपको दिखता आँकड़ा केवल क्षेत्र के आधार के लिए सही है। पिक्सेल मान को डिज़ाइन समझने का तरीक़ा मानिए, हर आगंतुक जो देखेगा उसका वादा नहीं।

पूर्णांकन

क्योंकि आधार आमतौर पर पूर्ण संख्या है, गुणा का परिणाम आमतौर पर सटीक है। 0.8125 rem 16 के आधार पर ठीक 13 px है; 0.6875 rem ठीक 11 px है। अगर आपको लंबा दशमलव मिले, तो यह संकेत है कि rem मान आपके टाइप किए आधार से अलग आधार से निकाला गया था।

सामान्य मान

पृष्ठ के नीचे की तालिका

पृष्ठ में उन पिक्सेल मानों की तालिका है जिनके अनुरूप सामान्य rem आँकड़े आपके तय किए आधार पर होते हैं: 0.5 rem 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 है। ये वे मान हैं जो जगह और अक्षर-पैमानों में सबसे अधिक आते हैं, और इन्हें ज़बानी जानना स्टाइलशीट को एक नज़र में पढ़ने योग्य बनाता है।

स्टाइलशीट को पिक्सेल में पढ़ना

एक उपयोगी अभ्यास है कि वह स्टाइलशीट लीजिए जो आपने नहीं लिखी और उसके मुख्य मानों को एक बार पिक्सेल में अनूदित कीजिए, परिणाम नोट में लिखकर। 1 rem का मुख्य पाठ आकार, 1.5 और 2.25 rem के शीर्षक, 2 rem का कंटेनर अंतर: पिक्सेल में 16, 24, 36 और 32। इस तरह देखने पर डिज़ाइन का तर्क प्रकट होता है, और आप उसे बिना कैलकुलेटर के डिज़ाइन फ़ाइल से तुलना कर सकते हैं।

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

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

पहले क्षेत्र में rem में आकार डालिए। दशमलव स्वीकार हैं, इसलिए 0.8125 उतना ही काम करता है जितना 1।

आधार सेट कीजिए

अगर आपका CSS रूट आकार नहीं बदलता तो उसे 16 पर रहने दीजिए। अगर बदलता है तो बदलिए। आपके टाइप करते ही परिणाम अद्यतन होता है।

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

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

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

CSS पिक्सेल

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

rem

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

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

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

डिज़ाइनर पिक्सेल में फ़ाइल सौंपता है; डेवलपर ने कोड rem में लिखा। यह जाँचने के लिए कि पृष्ठ मेल खाता है, वे rem को px में बदलते हैं और संख्याएँ तुलना करते हैं। बेमेल तुरंत दिखता है: 1.375 rem 22 px है, और अगर डिज़ाइन 24 कहता है, तो उनमें से एक ग़लत है।

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

जब आप स्टाइलशीट विरासत में पाते हैं, तो rem मान असली आकार छिपाते हैं। मुख्य मानों में से मुट्ठी भर को बदलना आपको डिज़ाइन का नक़्शा देता है: अक्षर कितने बड़े हैं, गटर कितने चौड़े हैं, ब्रेकपॉइंट कहाँ पड़ते हैं।

गड़बड़ी की रिपोर्टें और दस्तावेज़ लिखना

जो लोग पृष्ठ परखते हैं वे जो देखते हैं पिक्सेल में बताते हैं। जो डेवलपर कहता है कि पैडिंग 2.5 rem है वह परीक्षक के लिए कम अर्थ रखता है; 40 px कुछ अर्थ रखता है। बदलना दोनों पक्षों को एक-दूसरे को समझने देता है।

पिक्सेल में सटीक होने वाले मान तय करना

कुछ चीज़ों को डिवाइस पिक्सेल की सटीक संख्या होना चाहिए वरना वे धुँधली दिखती हैं: एक पिक्सेल की सीमा, 24 px ग्रिड पर बना आइकन। अगर आकार को पिक्सेल ग्रिड पर उतरना है, तो rem को px में बदलना बताता है कि क्या वह आपके आधार पर उतरता है।

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

बदले हुए रूट आकार को भूल जाना

अगर रूट 62.5% या clamp व्यंजक पर सेट है, तो मानक गुणक 16 लागू नहीं होता। परिणाम दोनों आधारों के अनुपात से ग़लत है। हमेशा पहले आधार जाँचिए।

rem को em से उलझाना

em तत्व के अपने फ़ॉन्ट आकार के सापेक्ष है, रूट के नहीं। 24 px के शीर्षक के भीतर 1.5em का मान 36 px है, पर 16 px के अनुच्छेद के भीतर 24 px। यह पृष्ठ rem बदलता है, जिसमें ऐसी अस्पष्टता नहीं। em के लिए em से px देखिए।

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

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

बहुत जल्दी पूर्णांकन

अगर आप 13.333 px को 13 में पूर्णांकित करके वापस बदलें, तो आपको 0.8125 rem मिलता है, वह 0.8333 नहीं जिससे आपने शुरू किया था। जब मायने रखे तब मूल rem मान रखिए।

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

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

सोलह, उस ब्राउज़र में जिसका डिफ़ॉल्ट बदला नहीं गया।

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

डिफ़ॉल्ट आधार पर बत्तीस। 10 के आधार पर वह 20 होता।

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

पाठक की सेटिंग या स्टाइलशीट के किसी नियम ने रूट आकार बदल दिया है। डेवलपर टूल में रूट तत्व का गणना किया फ़ॉन्ट आकार देखिए।

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

नहीं। rem रूट तत्व को संदर्भित करता है और em तत्व को स्वयं।

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

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

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

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

वे आदतें जो rem स्टाइलशीट को पढ़ने में आसान बनाती हैं

पिक्सेल मान को टिप्पणी में लिखिए

gap: 1.5rem; /* 24px */ जैसी पंक्ति कुछ अक्षर ख़र्च करती है और अगले पाठक को एक रूपांतरण बचाती है। यह भी दर्ज करती है कि आपने कौन-सा आधार माना।

छोटा पैमाना उपयोग कीजिए

जो परियोजना केवल मुट्ठी भर rem मान उपयोग करती है, जैसे 0.5, 1, 1.5, 2 और 3, उसे सीखना आसान है: एक दिन बाद आप उन्हें बिना सोचे पिक्सेल में जानते हैं। जब आप ऐसी स्टाइलशीट के लिए rem को px में बदलते हैं, तो आप केवल वही पुष्ट कर रहे होते हैं जो आपको याद है।

अपने मानों को नाम दीजिए

कस्टम गुणों के साथ, जैसे --space-md: 1.5rem, स्टाइलशीट संख्याओं की जगह इरादे का वर्णन करती है। नाम अर्थ ढोता है, और संख्या एक जगह बैठती है।

अलग डिफ़ॉल्ट आकार से परखिए

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

rem को px में बदलने के बाद पिक्सेल मान का अच्छा उपयोग

अनुपातों की तुलना कीजिए, केवल संख्याओं की नहीं

जब आप पूरी स्टाइलशीट के लिए rem को px में बदलें, तो आकारों के अलावा उनके बीच के अनुपात भी देखिए। अक्षर-पैमाना जिसमें हर क़दम पिछले का लगभग 1.25 गुना है, 16, 20, 25, 31 और 39 पिक्सेल देता है; 1.5 का पैमाना 16, 24, 36 और 54 देता है। अनुपात पहचानना बताता है कि डिज़ाइनर का इरादा क्या था, और जब नया आकार चाहिए तो आपको पैमाने को सुसंगत रूप से बढ़ाने देता है।

पिक्सेल में सोचने वालों के लिए अनुवाद कीजिए

टीम में हर कोई rem नहीं पढ़ता। प्रोजेक्ट मैनेजर, कॉपीराइटर और ग्राहक अक्सर स्क्रीनशॉट से काम करते हैं और शीर्षक को थोड़ा बड़ा करने को कहते हैं। अगर आप कह सकें कि शीर्षक अभी 36 px है और 2.5 rem पर 40 px होगा, तो बातचीत छोटी है। पृष्ठ दोनों शब्दावलियों के बीच त्वरित पुल के रूप में उपयोगी है।

स्पर्श-लक्ष्य और न्यूनतम आकार जाँचिए

टचस्क्रीन के दिशानिर्देश कम से कम लगभग 44 px के लक्ष्य माँगते हैं, और पाठ के दिशानिर्देश लगभग 16 px या अधिक का मुख्य पाठ माँगते हैं। दोनों पिक्सेल में कहे गए हैं। rem में लिखी स्टाइलशीट को उनके सामने जाँचने के लिए rem को px में बदलिए और देखिए कि बटन और पाठ रेखा पार करते हैं या नहीं।

ज़ूम किए मामले का ध्यान रखिए

आपको जो मान मिलता है वह आपके टाइप किए आधार के लिए है। अगर आपके पाठक पाठ बड़ा कर सकते हैं, तो 20 या 24 के आधार से रूपांतरण फिर आज़माइए और देखिए कि लेआउट स्क्रीन से क्या माँगता है। 16 पर आरामदायक कार्ड 24 पर बह सकता है, और यह जानने का सबसे अच्छा समय पृष्ठ के प्रकाशन से पहले है।

संबंधित कन्वर्टर

उपकरणों का वही परिवार पड़ोसी रूपांतरण ढकता है। rem पर लौटने के लिए px से rem उपयोग कीजिए। तत्व के सापेक्ष आकारों के लिए px से em और em से px हैं, और स्क्रीन के सापेक्ष आकारों के लिए px से vw और vw से px। उसी स्टाइलशीट के रंगों के लिए HEX से RGB और HSL से HEX हाथ में हैं, और क्लास नामों के लिए टेक्स्ट से kebab-case वाक्यांश को ऐसा नाम बनाता है जिसे CSS स्वीकार करे।

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

मान लीजिए आप पुल रिक्वेस्ट की समीक्षा कर रहे हैं और स्टाइलशीट में हीरो खंड है, padding: 5rem 1.5rem के साथ, 3.5rem का शीर्षक और 1.25rem का प्रस्तावना अनुच्छेद। डिज़ाइन फ़ाइल कहती है 80 px और 24 px की पैडिंग, 56 px का शीर्षक और 20 px की प्रस्तावना। आप 5 टाइप करके 80 px पढ़ते हैं, 1.5 टाइप करके 24, 3.5 टाइप करके 56, 1.25 टाइप करके 20। चारों मेल खाते हैं, इसलिए बिल्ड वफ़ादार है। अगर शीर्षक 3.25 rem होता, तो आप 52 पढ़ते और अंतर को डिज़ाइनर तक पहुँचने से पहले पकड़ लेते।

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

बदलने से पहले

आधार खोजिए: स्टाइलशीट में रूट नियम, या डेवलपर टूल में गणना किया आकार।

बदलते समय

rem मान टाइप कीजिए, परिणाम के बग़ल में दिखाया आधार जाँचिए और पिक्सेल आँकड़ा नोट कीजिए।

बदलने के बाद

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

आम ग़लतियाँ

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

वह डिफ़ॉल्ट है, नियम नहीं। रूट जाँचिए।

पिक्सेल को अंतिम मानना

उत्तर एक आधार के लिए टिकता है। बड़े डिफ़ॉल्ट वाला पाठक बड़े पिक्सेल देखता है।

rem और em को उलझाना

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

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

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

सारांश

यहाँ rem को px में बदलने के लिए, rem में आकार टाइप कीजिए और सूत्र px = rem × आधार से उसे तुरंत पिक्सेल में पढ़िए। आधार 16 px से शुरू होता है, ब्राउज़र का डिफ़ॉल्ट, और आप उसे अपने CSS से मिलाने के लिए बदल सकते हैं। रूपांतरण अनुपात रखता है, क्योंकि एक rem वही है जो रूट फ़ॉन्ट आकार है, और वह आपके पाठक की सेटिंग नहीं जान सकता, इसलिए आँकड़ा केवल क्षेत्र के आधार के लिए सही है। सामान्य मानों की तालिका, 0.5 rem के 8 px से 4 rem के 64 px तक, आपको स्टाइलशीट एक नज़र में पढ़ने में मदद करती है। कुछ अपलोड नहीं होता।