निःशुल्क पिक्सेलबाट REM कन्भर्टर
कन्फिगर योग्य आधार फन्ट साइजका साथ px, rem, em, pt, vw, vh, र % बीच रूपान्तरण गर्नुहोस्। सामान्य pixel साइजका लागि सन्दर्भ तालिका समावेश छ।
सन्दर्भ (rem/em/vw/vh/%-लाई असर गर्छ)
निकटतम Tailwind टोकनहरू (16px रूटमा)
सामान्य पिक्सेल आकारहरू → rem (16px आधारमा)
टाँसिएको CSS रूपान्तरण गर्नुहोस्
सामान्य प्रयोगहरू
- वेब विकास को लागि PX to 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 पुनर्लेखनpaste-CSS प्यानलले कच्चा CSS पाठ स्वीकार गर्छ र एउटा रेगेक्स प्रतिस्थापन लागू गर्छ: px→rem मोडमा यसले हरेक px टोकन मिलाउँछ र संख्यात्मक भागलाई value/baseFontPx + rem ले प्रतिस्थापन गर्छ; rem→px मोडमा यसले उल्टो गर्छ। कति मानहरू पुनर्लेखन गरियो प्रमाणित गर्न प्रतिस्थापन गणना देखाइन्छ।
सम्बन्धित उपकरणहरू
एकाइ परिवर्तक
लम्बाइ, तौल, तापक्रम, क्षेत्रफल, आयतन, र थपका एकाइहरू बीच रूपान्तरण गर्नुहोस्।
CSS clamp() जेनेरेटर
responsive typography र spacing का लागि fluid CSS clamp() मान उत्पन्न गर्नुहोस्। min/max साइज र viewport दायरा सेट गर्नुहोस्, लाइभ प्रिभ्यू हेर्नुहोस्, र एक-लाइन CSS कपी गर्नुहोस्।
CSS ग्रिड जनरेटर
CSS ग्रिड दृश्यमान रूपमा डिजाइन गर्नुहोस् — ट्र्याकहरू, एकाइहरू र अंतरहरू — र उत्पन्न CSS र HTML प्रतिलिपि गर्नुहोस्।