CSS इकाई परिवर्तक

px, em, rem, %, vw, vh जैसी CSS इकाइयों के बीच रूपांतरण का समर्थन करता है, उत्तरदायी ब्रेकपॉइंट सेटिंग्स प्रदान करता है। संदर्भ-आश्रित मानों की स्वचालित रूप से गणना करता है, जो उत्तरदायी लेआउट विकास, फ्रंटएंड कार्यान्वयन और शैली अनुकूलन के लिए उपयुक्त है।

उपयोग निर्देश

🚀 त्वरित शुरुआत

मान और इकाई दर्ज करें: जैसे 16 + px या 1 + rem
पहले "से" (From) इकाई चुनें और मान दर्ज करें, फिर "तक" (To) इकाई चुनें; तेज़ी से बदलने के लिए Swap का उपयोग करें।
मोबाइल: ड्रॉअर में ऊपर‑दाएँ तीर का उपयोग करके From/To के बीच स्विच करें।
सेटिंग्स rem/em/%/vw/vh के लिए उपलब्ध हैं; एब्सोल्यूट इकाइयों के लिए ये विकल्प निष्क्रिय रहते हैं।
परिणाम देखें: अन्य इकाइयाँ तुरंत गणना हो जाती हैं और कॉपी की जा सकती हैं
ब्रेकपॉइंट: मोबाइल/टैबलेट/डेस्कटॉप प्रीसेट से स्विच करें, अलग‑अलग स्क्रीन पर रूपांतरण की जाँच के लिए

📌 आम उपयोग के परिदृश्य

उपयोग परिदृश्य: रेस्पॉन्सिव लेआउट, डिज़ाइन‑से‑डेव हैंडऑफ़, अलग‑अलग घनत्व/प्रिंट के बीच संबंध, एकीकृत स्टाइल कन्वेंशन

🧭 उपयोग संबंधी सुझाव

एक बेस तय करें: 16px root आम है, जिससे rem ↔ px का मानसिक हिसाब आसान हो जाता है
पाठ के लिए rem को प्राथमिकता दें: इससे ग्लोबल स्केलिंग और a11y आसान होती है; कम्पोनेंट‑लोकल स्केलिंग के लिए em का उपयोग करें
लेआउट के लिए viewport इकाइयाँ उपयोग करें: अतिवादी मानों से बचने के लिए इन्हें ब्रेकपॉइंट और clamp() आदि के साथ संयोजित करें
दशमलव और राउंडिंग: पढ़ने में कठिन संख्या से बचने के लिए उचित प्रिसिज़न रखें

🎛️ पैरामीटर और संदर्भ

REM बेस (Root फ़ॉन्ट आकार): rem ↔ px रूपांतरण को निर्धारित करता है। वेब पर 16px आम है, जिससे मानसिक हिसाब (1rem≈16px) आसान होता है। यदि डिज़ाइन 16px पर आधारित न हो तो अस्थायी रूप से समायोजित करें।
EM बेस (Parent फ़ॉन्ट आकार): em और % (जब संदर्भ Font size हो) तय करता है। कम्पोनेंट‑लोकल स्केलिंग के लिए उपयोगी: ब्लॉक को स्केल करने के लिए parent फ़ॉन्ट आकार बदलें।
% संदर्भ: Font size / Width / Height में से संदर्भ चुनें। लेआउट के लिए Width/Height उपयुक्त हैं; टाइपोग्राफ़ी (जैसे line-height) के लिए Font size चुनें।
ब्रेकपॉइंट प्रीसेट: मोबाइल/टैबलेट/डेस्कटॉप/लार्ज भी viewport आकार सेट करते हैं ताकि अलग‑अलग चौड़ाइयों पर जल्दी अनुमान लगाया जा सके। यह केवल अनुमान के लिए है, रनटाइम मीडिया क्वेरी नहीं।
Viewport आकार: vw/vh/vmin/vmax और % (जब संदर्भ width/height हो) के लिए उपयोग होता है। एड्रेस बार, सेफ़‑एरिया और स्क्रोलबार के कारण वास्तविक डिवाइस मान थोड़ा भिन्न हो सकते हैं।
DPI (dots per inch): भौतिक इकाइयों pt/pc/in/cm/mm/q ↔ px के लिए। वेब पर डिफ़ॉल्ट मान 96 DPI माना जाता है; प्रिंट/HiDPI के लिए डिवाइस DPI सेट करें, वरना इसे अनुमान मानें।
टिप्स: 1) 16px और 96 DPI आम बेस हैं; 2) ब्रेकपॉइंट स्विच करके लेआउट‑प्रतिशत की जाँच करें; 3) ये नियंत्रण डिज़ाइन‑टाइम अनुमान में मदद करते हैं, ब्राउज़र के अंतिम DOM/CSS गणना को प्रतिस्थापित नहीं करते।

⚠️ सीमाएँ और संगतता

% का संदर्भ प्रॉपर्टी पर निर्भर करता है (width/height/line‑height अलग‑अलग हो सकते हैं); यह टूल सामान्य मामलों के लिए अनुमान देता है
ex/ch फ़ॉन्ट मीट्रिक पर निर्भर हैं; अलग‑अलग फ़ॉन्ट/ब्राउज़र में परिणाम बदल सकते हैं
Viewport इकाइयाँ स्क्रोलबार, एड्रेस बार और सेफ़‑एरिया के साथ बदल सकती हैं; हल्के अंतर की अपेक्षा रखें
भौतिक इकाइयाँ ↔ px, DPI के साथ बदलती हैं; प्रिंट/HiDPI डिवाइस के लिए अतिरिक्त जाँच आवश्यक है

🔒 गोपनीयता और सुरक्षा

सारा प्रोसेसिंग आपके ब्राउज़र में लोकली होता है; डेटा कभी भी आपके डिवाइस से बाहर नहीं जाता

❓ सामान्य प्रश्न (FAQ)

rem और em में क्या अंतर है?

rem, root फ़ॉन्ट आकार के सापेक्ष होता है (पूर्वानुमेय ग्लोबल स्केलिंग); em, parent के सापेक्ष होता है (कम्पोनेंट‑लोकल स्केलिंग के लिए बेहतर)

मुझे px उपयोग करना चाहिए या rem?

लेआउट और टेक्स्ट के लिए rem को प्राथमिकता दें (a11y के लिए बेहतर); px आइकन/बॉर्डर जैसी सटीक किनारों के लिए ठीक है

vw/vh अलग‑अलग डिवाइस पर अलग व्यवहार क्यों करते हैं?

मोबाइल एड्रेस बार/सेफ़‑एरिया/स्क्रोलबार viewport को प्रभावित करते हैं; clamp()/min()/max() और ब्रेकपॉइंट के साथ मिलाकर उपयोग करें

स्क्रीन पिक्सेल को प्रिंट इकाइयों में कैसे बदलूँ?

DPI सेट करें (जैसे 96/72/300)। यहाँ स्क्रीन→प्रिंट केवल अनुमान है; प्रोडक्शन के लिए ICC वर्कफ़्लो के साथ प्रूफ़िंग ज़रूरी है