मुफ़्त पिक्सेल से REM कनवर्टर
कॉन्फ़िगर करने योग्य आधार फ़ॉन्ट आकार के साथ px, rem, em, pt, vw, vh, और % के बीच कनवर्ट करें। सामान्य पिक्सेल आकारों के लिए एक संदर्भ तालिका शामिल है।
संदर्भ (rem/em/vw/vh/% को प्रभावित करता है)
निकटतम Tailwind टोकन (16px रूट पर)
सामान्य पिक्सेल आकार → rem (16px बेस पर)
पेस्ट किया गया CSS परिवर्तित करें
सामान्य उपयोग
- वेब विकास के लिए PX से REMमापनीय, सुलभ CSS के लिए पिक्सल मानों को rem इकाइयों में परिवर्तित करें। अपना आधार फ़ॉन्ट आकार सेट करें और सभी समान मान तुरंत देखें।
- प्रतिक्रियाशील डिजाइन के लिए CSS इकाइयांविभिन्न स्क्रीन आकार और अभिविन्यास के लिए सही ढंग से प्रतिक्रिया करने वाले लेआउट बनाने के लिए px, vw, vh और% के बीच परिवर्तित करें।
- डिजाइन स्पेक को CSS इकाइयों में परिवर्तित करेंस्वच्छ, मापनीय CSS कार्यान्वयन के लिए Figma या Sketch पिक्सल मानों को rem/em इकाइयों में अनुवाद करें।
- Tailwind CSS यूनिट संदर्भसमझें कि Tailwind CSS आकार वर्ग सटीक कार्यान्वयन के लिए पिक्सल और rem मानों के लिए कैसे मानचित्र करते हैं।
- प्रिंट स्टाइलशीट के लिए CSS इकाइयों को परिवर्तित करेंप्रिंट मीडिया क्वेरी और PDF आउटपुट CSS के लिए px, pt और rem के बीच परिवर्तित करें।
यह कैसे काम करता है
सभी कन्वर्ज़न शून्य डिपेंडेंसी वाले एक हाथ से लिखे अंकगणित इंजन का उपयोग करके पूरी तरह आपके ब्राउज़र में चलते हैं। टूल सात CSS यूनिट (px, rem, em, pt, vw, vh, और %) के बीच हर गणना को एक सामान्य आधार के रूप में पिक्सेल से रूट करके कन्वर्ट करता है, आपके कॉन्फ़िगर किए रूट फ़ॉन्ट साइज़, पेरेंट फ़ॉन्ट साइज़, या व्यूपोर्ट आयामों के मुक़ाबले सिंपल भाग या गुणा लागू करते हुए।
- 1अपने कॉन्टेक्स्ट वैल्यू सेट करेंकन्वर्ट करने से पहले, आप चार नंबर कॉन्फ़िगर करते हैं जो रिलेटिव CSS यूनिट को सार्थक बनाते हैं: रूट फ़ॉन्ट साइज़ (डिफ़ॉल्ट 16px, जो ब्राउज़र डिफ़ॉल्ट है), पेरेंट एलिमेंट फ़ॉन्ट साइज़ (em और % कन्वर्ज़न के लिए), और व्यूपोर्ट चौड़ाई और ऊँचाई (vw और vh के लिए)। ये वही वैल्यू हैं जो आपका ब्राउज़र रनटाइम पर CSS हल करते समय उपयोग करता।
- 2सार्वभौमिक बिचौलिये के रूप में पिक्सेलकन्वर्टर पहले आपके इनपुट को एक रॉ पिक्सेल काउंट में नॉर्मलाइज़ करने के लिए toPixels() कॉल करता है — उदाहरण के लिए, 1.5rem 1.5 × baseFontPx बन जाता है, और 50vw 0.5 × vpWidth बन जाता है। फिर fromPixels() उस पिक्सेल काउंट को टारगेट यूनिट के लिए उचित फ़ैक्टर से भाग करता है। सभी सात यूनिट एक साथ कन्वर्ज़न टेबल में दिखाई जाती हैं।
- 3निकटतम Tailwind टोकन लुकअपकन्वर्ट करने के बाद, टूल rem वैल्यू गणना करता है और दो हार्डकोडेड लुकअप टेबल स्कैन करता है — Tailwind के तेरह फ़ॉन्ट-साइज़ टोकन (text-xs से text-9xl) और इसका स्पेसिंग स्केल — एब्सोल्यूट दूरी से निकटतम मैच खोजते हुए। एक = चिह्न का मतलब है वैल्यू एक सटीक टोकन है; ≈ का मतलब है यह निकटतम सन्निकटन है।
- 4रेगेक्स के ज़रिए बैच CSS फिर से लिखनापेस्ट-CSS पैनल रॉ CSS टेक्स्ट स्वीकार करता है और एक रेगेक्स प्रतिस्थापन लागू करता है: px→rem मोड में यह हर px टोकन मैच करता है और न्यूमेरिक भाग को value/baseFontPx + rem से बदलता है; rem→px मोड में यह उल्टा करता है। प्रतिस्थापन गिनती दिखाई जाती है ताकि आप सत्यापित कर सकें कि कितने वैल्यू फिर से लिखे गए।
संबंधित टूल
इकाई कनवर्टर
लंबाई, वजन, तापमान, क्षेत्रफल, आयतन आदि की इकाइयों के बीच रूपांतरित करें।
CSS क्लैंप() जेनरेटर
प्रतिक्रियाशील टाइपोग्राफी और रिक्ति के लिए एक द्रव CSS क्लैंप() मान उत्पन्न करें। न्यूनतम/अधिकतम आकार और व्यूपोर्ट रेंज सेट करें, लाइव पूर्वावलोकन देखें, और एक-पंक्ति CSS की प्रतिलिपि बनाएँ।
CSS ग्रिड जनरेटर
CSS ग्रिड को विज़ुअली डिज़ाइन करें — ट्रैक, इकाइयाँ और अंतराल — और जेनरेट किए गए CSS और HTML को कॉपी करें।