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

डिज़ाइनर और डेवलपर px को rem में क्यों बदलते हैं

डिज़ाइन उपकरण पिक्सेल में बोलते हैं। मॉकअप कहता है कि शीर्षक 32 px का है, खंडों के बीच का अंतर 48 px है, बटन में 16 px की पैडिंग है। अच्छी तरह लिखी स्टाइलशीट rem में बोलती हैं। उन दोनों भाषाओं के बीच की खाई वहाँ है जहाँ यह पृष्ठ बैठा है: आप पिक्सेल में आकार टाइप करते हैं और उसे rem में पढ़ते हैं, ताकि जो संख्या आप CSS में डालते हैं उसका वही अर्थ हो जो डिज़ाइनर का था। px को rem में बदलना एक छोटा काम है, पर वेबसाइट के जीवन में यह सैकड़ों बार किया जाता है, और ग़लत आधार सावधानी से बने लेआउट को हर जगह एक साथ थोड़ा ग़लत बना देता है।

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

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

सूत्र और आधार

rem बराबर px भाग आधार

सूत्र एक भाग है: rem = px ÷ आधार। 16 px के सामान्य आधार के साथ 24 px का आकार 1.5 rem बन जाता है, 32 px 2 rem बन जाता है और 8 px 0.5 rem बन जाता है। पृष्ठ आपके टाइप करते ही परिणाम दिखाता है, और वह आधार भी जो उसने उपयोग किया, इसलिए पंक्ति 24 px = 1.5 rem (16 px) आपको ठीक-ठीक बताती है कि क्या मान लिया गया था।

16 कहाँ से आता है

आधार 16 px से शुरू होता है क्योंकि जब कोई कुछ और न कहे तो ब्राउज़र वही उपयोग करता है। यह वेब का नियम नहीं है; यह डिफ़ॉल्ट का डिफ़ॉल्ट है, और दशकों से स्थिर रहा है। अगर आपका CSS रूट फ़ॉन्ट आकार को कभी नहीं छूता, तो अधिकांश आगंतुकों के लिए 1 rem 16 px है। अगर छूता है, तो आधार वही है जो आपने सेट किया।

62.5% की तरकीब और लोग उसे क्यों उपयोग करते हैं

कुछ स्टाइलशीट रूट आकार को 62.5% पर सेट करती हैं, जो डिफ़ॉल्ट ब्राउज़र पर 1 rem को 10 px के बराबर बनाता है, ताकि 24 px बस 2.4 rem हो और गणित दिमाग़ में करना आसान हो। यह काम करता है, पर इसकी क़ीमत है: पूरा पृष्ठ अब उस प्रतिशत पर निर्भर है, और जो भी घटक आधार के रूप में 16 की अपेक्षा करता है वह बहुत छोटा निकलेगा। अगर आपकी परियोजना यह करती है, तो इस पृष्ठ के आधार क्षेत्र में 10 टाइप कीजिए, और हर आँकड़ा आपके CSS से मेल खाएगा।

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

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

एक rem वही है जो रूट फ़ॉन्ट आकार है, इसलिए rem में लिखा लेआउट अपनी बनावट रखता है जब वह आकार बदलता है। उसे उस तरह लिखने का पूरा कारण यही है। जब आप px को rem में बदलते हैं, तो जो संख्या आपको मिलती है वही अनुपात है जो पिक्सेल मान का आपके चुने आधार पर था, अब ऐसे तरीक़े से व्यक्त जो पैमाने पर चढ़ता है।

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

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

पूर्णांकन

16 से भाग कई सामान्य आकारों (16, 24, 32, 48, 64) के लिए साफ़ परिणाम देता है और अन्य के लिए आवर्ती दशमलव (10 px 0.625 rem है; 13 px 0.8125)। पृष्ठ उतने अंक देता है जितने संख्या को चाहिए, और आप तय करते हैं कि स्टाइलशीट में कितने रखने हैं। ब्राउज़र लंबे दशमलव बिना परेशानी के सँभालते हैं, पर 0.8125rem जैसा पूर्णांकित मान दस अंकों वाले मान से पढ़ने और बनाए रखने में आसान है।

सामान्य आकार

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

कन्वर्टर के नीचे आपको सामान्य आकारों की तालिका मिलती है: 8 px 0.5 rem है, 10 px 0.625 है, 12 px 0.75 है, 14 px 0.875 है, 16 px 1 है, 18 px 1.125 है, 20 px 1.25 है, 24 px 1.5 है, 32 px 2 है, 48 px 3 है और 64 px 4 है। ये वे आकार हैं जो अक्षर-पैमानों और जगह की प्रणालियों में सबसे अधिक आते हैं, और इन्हें सामने रखना एक रूपांतरण बचाता है।

rem पर बना पैमाना

एक उपयोगी आदत है rem मानों का छोटा समूह चुनना और उन्हें दोबारा उपयोग करना: जगह के लिए 0.5, 1, 1.5, 2, 3 और 4, और अक्षरों के लिए 0.875, 1, 1.25, 1.5, 2। डिज़ाइनर इसे पैमाना कहते हैं, और यह साइट को दृश्यात्मक रूप से सुसंगत रखता है। जब मॉकअप आपको 22 px जैसा विषम मान दे, तो कन्वर्टर से देखिए कि वह 1.375 rem है, और फिर तय कीजिए कि अपने पैमाने के निकटतम मान में पूर्णांकित करना है या नहीं।

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

पिक्सेल मान टाइप कीजिए

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

आधार जाँचिए

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

rem मान कॉपी कीजिए

आँकड़ा पढ़िए और अपने CSS में उपयोग कीजिए, इकाई उसके बाद लिखकर: font-size: 1.5rem। इकाई मत भूलिए, क्योंकि अधिकांश गुणों में बिना इकाई की संख्या का कुछ और अर्थ होता है।

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

CSS पिक्सेल आपकी स्क्रीन का पिक्सेल नहीं है

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

rem क्यों है

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

व्यवहार में आप rem कहाँ पाते हैं

अक्षर

मुख्य पाठ आमतौर पर 1 rem होता है, शीर्षक 1.25 से 3 rem, छोटे अक्षर 0.75 से 0.875 rem। इन्हें rem में लिखना पाठक को एक ब्राउज़र सेटिंग बदलकर पूरे पृष्ठ को बड़ा करने देता है।

जगह और लेआउट

rem में मार्जिन, पैडिंग और अंतर ख़ाली जगह को अक्षरों के अनुपात में रखते हैं। जब पाठ बढ़ता है, तो उसके आसपास की जगह भी बढ़ती है, और लेआउट पुराने डिब्बों में बड़े अक्षर ठूँसने की जगह संतुलित रहता है।

मीडिया क्वेरी

em या rem में लिखे ब्रेकपॉइंट पाठक के पाठ आकार का जवाब देते हैं, इसलिए जिसने पाठ बड़ा किया है उसके लिए लेआउट अपने संकरे रूप में जल्दी बदल जाता है। यह जानने लायक़ सुधार है, हालाँकि ब्रेकपॉइंट में पिक्सेल आम बने रहते हैं।

पिक्सेल में क्या छोड़ें

बाल जैसी सीमाएँ, बॉक्स की छायाएँ और पतले आइकन अक्सर निश्चित पिक्सेल आकारों पर सबसे अच्छे दिखते हैं, क्योंकि 0.0625rem की सीमा जो बड़े पाठ के साथ 0.1rem तक बढ़ जाए किसी की मदद नहीं करती। जो पैमाने पर चढ़े उसके लिए rem और जो न चढ़े उसके लिए पिक्सेल उपयोग कीजिए।

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

भूल जाना कि आधार हमेशा 16 नहीं होता

अगर परियोजना html { font-size: 62.5% } सेट करती है, या तरल रूट आकार उपयोग करती है, तो गुणक अलग है। किसी भी कन्वर्टर की संख्या पर भरोसा करने से पहले, इस वाले सहित, स्टाइलशीट जाँचिए।

रूट आकार को ही बदलना

अगर आप रूट आकार पिक्सेल में सेट करते हैं, तो पाठक की ब्राउज़र सेटिंग अधिलेखित हो जाती है और rem का लाभ खो जाता है। रूट को प्रतिशत में सेट कीजिए, या उसे छोड़ दीजिए, ताकि उपयोगकर्ता की पसंद का सम्मान हो।

ऐसे घटक के भीतर rem उपयोग करना जो अपना फ़ॉन्ट आकार सेट करता है

rem हमेशा रूट को संदर्भित करता है, घटक को नहीं। 14 px फ़ॉन्ट आकार और 1rem पैडिंग वाले बटन की पैडिंग बटन के अपने पाठ का अनुसरण नहीं करती। अगर आप ऐसी जगह चाहते हैं जो तत्व के पाठ का अनुसरण करे, तो वह em का काम है।

बिना योजना के इकाइयाँ मिलाना

जो स्टाइलशीट एक मार्जिन के लिए px, अगले के लिए rem और तीसरे के लिए em उपयोग करती है, उसके बारे में तर्क करना कठिन है। कोई नियम चुनिए: अक्षरों और जगह के लिए rem, सीमाओं और छायाओं के लिए पिक्सेल, और उस पर टिके रहिए।

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

16 px कितने rem है?

एक, डिफ़ॉल्ट ब्राउज़र पर। सोलह भाग सोलह के आधार का।

क्या rem, px से बेहतर है?

अक्षरों और जगह के लिए, अधिकांश परियोजनाओं में वह बेहतर विकल्प है, क्योंकि वह पाठक की सेटिंग का सम्मान करता है। जिन चीज़ों को पैमाने पर नहीं चढ़ना चाहिए उनके लिए पिक्सेल सही बने रहते हैं।

मेरा परिणाम किसी दूसरी साइट से भिन्न क्यों है?

शायद आधार भिन्न है। क्षेत्र जाँचिए: कुछ उपकरण 10 मानते हैं, कुछ 16, कुछ 14। यह पृष्ठ परिणाम के बग़ल में आधार दिखाता है।

क्या मुझे पूर्णांकित करना होगा?

नहीं। ब्राउज़र लंबे दशमलव स्वीकार करते हैं। केवल पठनीयता के लिए पूर्णांकित कीजिए।

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

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

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

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

px को rem में बदलते समय समझदारी से चुनना

परियोजना के लिए एक आधार तय कीजिए और उस पर टिके रहिए

जो भी चुनें, उसे निर्णय बनाइए और परियोजना के दस्तावेज़ों में लिखिए। जो टीम आधार पर असहमत रहती है वह ऐसे घटक बनाती है जो आपस में फ़िट नहीं बैठते।

डिज़ाइन के चरण में बदलिए, आख़िरी क्षण में नहीं

अगर आप मॉकअप पढ़ते समय px को rem में बदलते हैं, तो आप पैमाने को डिज़ाइन में बनाते हैं और विषम मानों पर जल्दी ध्यान देते हैं। अगर आप अंत में करते हैं, तो आप उन्हें असंगत संख्याओं के ढेर के रूप में पाते हैं।

व्यूपोर्ट इकाइयों पर भी विचार कीजिए

उन शीर्षकों के लिए जिन्हें स्क्रीन भरनी है, px से vw आकार को व्यूपोर्ट के हिस्से के रूप में व्यक्त करता है। वह rem से अलग पैमाने पर चढ़ता है, और दोनों अक्सर मिलाए जाते हैं।

वे आदतें जो px को rem में बदलना आसान बनाती हैं

रूपांतरण तालिका अपने दिमाग़ में रखिए

16 के आधार पर कुछ आधार-बिंदु अधिकांश काम ढक लेते हैं: 4 px 0.25 rem है, 8 px 0.5, 12 px 0.75, 16 px 1, 24 px 1.5 और 32 px 2। जब मॉकअप आपको इनके बीच का मान दे, तो आप पृष्ठ पर px को rem में बदलने से पहले अनुमान लगा सकते हैं, और कन्वर्टर केवल पुष्टि के लिए उपयोग कर सकते हैं। कुछ सप्ताह बाद आप तालिका को बिना देखे जान जाएँगे।

डिज़ाइन प्रणाली को काम करने दीजिए

अगर आपकी टीम डिज़ाइन टोकन रखती है, जैसे spacing-2 या font-lg, तो उन्हें एक बार rem में सहेजिए, और सबको नामों को संदर्भित करने दीजिए। तब किसी को फिर px को rem में बदलने की ज़रूरत नहीं, और पैमाने में बदलाव एक जगह किया जाता है। कन्वर्टर वह उपकरण है जिसे आप टोकन लिखते समय उपयोग करते हैं, उन्हें उपयोग करते समय नहीं।

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

padding: 1.25rem; /* 20px */ जैसी पंक्ति कुछ अक्षर ख़र्च करती है और अगले डेवलपर को कैलकुलेटर उठाने से बचाती है। यह भी दर्ज करती है कि आपने कौन-सा आधार माना, जो तब मदद करता है जब रूट आकार बाद में बदले।

बदली हुई ब्राउज़र सेटिंग से परखिए

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

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

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

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

मान लीजिए मॉकअप कार्ड का शीर्षक 28 px, कार्ड की पैडिंग 20 px और कार्डों के बीच 12 px का अंतर देता है, और आपकी परियोजना डिफ़ॉल्ट 16 px आधार उपयोग करती है। आप 28 टाइप करके 1.75 rem पढ़ते हैं, 20 टाइप करके 1.25 rem, 12 टाइप करके 0.75 rem। स्टाइलशीट में आप font-size: 1.75rem, padding: 1.25rem और gap: 0.75rem लिखते हैं। जो आगंतुक ब्राउज़र पाठ आकार 20 px तक बढ़ाता है वह वही कार्ड देखता है, चौथाई से बड़ा: शीर्षक 35 px, पैडिंग 25 px और अंतर 15 px, सब अनुपात में। अगर आपने पिक्सेल लिखे होते, तो शीर्षक 28 पर रहता और कार्ड ग़लत दिखता।

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

बदलने से पहले

पता कीजिए कि आपका CSS कौन-सा आधार उपयोग करता है। तय कीजिए कि कौन-से आकार पैमाने पर चढ़ें और कौन-से नहीं।

बदलते समय

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

बदलने के बाद

ब्राउज़र में बड़े डिफ़ॉल्ट पाठ आकार से पृष्ठ परखिए, और ऐसे डिब्बे खोजिए जो अब अपना पाठ नहीं सँभालते।

आम ग़लतियाँ

मान लेना कि 1 rem हमेशा 16 px है

वह तभी है जब किसी ने रूट आकार नहीं बदला, और कुछ पाठकों ने बदला है। लेआउट ऐसे लिखिए कि वह अन्य आकारों पर भी काम करे।

रूट आकार को पिक्सेल में सेट करना

वह पाठक की पसंद को अधिलेखित कर देता है। प्रतिशत उपयोग कीजिए, या सेट मत कीजिए।

सब कुछ बदलना

हर आकार को पैमाने पर नहीं चढ़ना चाहिए। सीमाएँ और छायाएँ पिक्सेल में छोड़िए।

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

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

सारांश

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