मुख्य सामग्री पर जाएँ
CrateX.app लोगो

CrateX.app

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

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

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

Pixels (px)
px
इकाइयाँ बदलने के लिए टैप करें

लंबाई इकाइयाँ

टाइपोग्राफ़ी

व्यूपोर्ट

प्रतिशत

Root फ़ॉन्ट आकार के सापेक्ष (rem)
rem
इकाइयाँ बदलने के लिए टैप करें

लंबाई इकाइयाँ

टाइपोग्राफ़ी

व्यूपोर्ट

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

क्विक स्टार्ट

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

सामान्य उपयोग के मामले

उपयोग परिदृश्य

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

अतिरिक्त परिदृश्य

rem से px, em कन्वर्टर और viewport यूनिट को उसी प्रवाह में संभाला जा सकता है, ताकि कॉपी या एक्सपोर्ट से पहले परिणाम जल्दी जांचे जा सकें।

उपयोग टिप्स

एक बेस तय करें: 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 डिवाइस के लिए अतिरिक्त जाँच आवश्यक है

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

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

अक्सर पूछे जाने वाले प्रश्न

4

अगला चरण पूरा करने के लिए इन संबंधित टूल का उपयोग करें।