मोफत पिक्सेल ते REM कन्व्हर्टर

हे कसे कार्य करते

सर्व रूपांतरे शून्य अवलंबित्वांसह गराज-लिहिलेल्या अंकगणित इंजिनचा वापर करून पूर्णपणे तुमच्या ब्राउझरमध्ये चालतात. साधन सात CSS एककांदरम्यान (px, rem, em, pt, vw, vh, आणि %) प्रत्येक गणना सामान्य base म्हणून pixels मार्गे नेऊन रूपांतरित करते, तुमच्या कॉन्फिगर केलेल्या root फॉन्ट आकार, parent फॉन्ट आकार, किंवा viewport परिमाणांविरुद्ध साधा भागाकार किंवा गुणाकार लावत.

1. 1
   तुमची context मूल्ये सेट करा

   रूपांतरणापूर्वी, तुम्ही सापेक्ष CSS एककांना अर्थपूर्ण बनवणारे चार आकडे कॉन्फिगर करता: root फॉन्ट आकार (डीफॉल्ट 16px, जो ब्राउझर डीफॉल्ट आहे), parent घटकाचा फॉन्ट आकार (em आणि % रूपांतरणांसाठी), आणि viewport रुंदी व उंची (vw आणि vh साठी). runtime ला CSS सोडवताना तुमचा ब्राउझर वापरणार तीच ही मूल्ये आहेत.
2. 2
   सार्वत्रिक मध्यवर्ती म्हणून Pixel

   कन्व्हर्टर प्रथम तुमचे इनपुट कच्च्या pixel संख्येत नॉर्मलाइझ करण्यासाठी toPixels() कॉल करतो — उदाहरणार्थ, 1.5rem चे 1.5 × baseFontPx होते, आणि 50vw चे 0.5 × vpWidth होते. नंतर fromPixels() ती pixel संख्या लक्ष्य एककाच्या योग्य घटकाने भागते. सातही एकके रूपांतरण सारणीत एकाचवेळी दाखवली जातात.
3. 3
   सर्वात जवळचा Tailwind token लुकअप

   रूपांतरणानंतर, साधन rem मूल्य मोजते आणि दोन hardcoded lookup सारण्या स्कॅन करते — Tailwind चे तेरा फॉन्ट-आकार tokens (text-xs ते text-9xl) आणि त्याचा spacing scale — निरपेक्ष अंतराने सर्वात जवळचा जुळणी शोधत. = चिन्ह म्हणजे मूल्य exact token आहे; ≈ म्हणजे ते सर्वात जवळचे अंदाजित आहे.
4. 4
   Regex द्वारे बॅच CSS पुनर्लेखन

   paste-CSS panel कच्चा CSS मजकूर स्वीकारतो आणि regex substitution लावतो: px→rem मोडमध्ये तो प्रत्येक px token जुळवतो आणि संख्यात्मक भाग value/baseFontPx + rem ने बदलतो; rem→px मोडमध्ये तो उलटे करतो. किती मूल्ये पुन्हा लिहिली गेली हे सत्यापित करण्यासाठी substitution संख्या दाखवली जाते.

संबंधित साधने