px ते rem आणि em कनवर्टर

टूल काय करते

हे टूल px (पिक्सेल) मूल्यांना rem आणि em मध्ये रूपांतरित करते, आणि उलट दिशेनेही. तुम्ही px, rem किंवा em यापैकी कोणत्याही एका युनिटमध्ये मूल्य टाकले, की टूल बाकीच्या दोन युनिट्समधील समतुल्य मूल्ये आपोआप मोजून दाखवते. एक फील्ड संपादित केल्यावर इतर दोन तुम्ही टाईप करत असतानाच अपडेट होतात, त्यामुळे वेगळे बटण दाबावे लागत नाही. पेजवर "px, rem किंवा em मूल्य प्रविष्ट करा — तुम्ही टाईप करत असताना इतर दोन अपडेट होतील." असा इशारा दिसतो, जो नेमके हेच सांगतो. अचूक रूपांतरणासाठी तुम्ही स्वतःचा रूट फॉन्ट आकार आणि em रूपांतरणासाठी संदर्भ फॉन्ट आकार सेट करू शकता, जेणेकरून निकाल तुमच्या स्वतःच्या डिझाइनला लागू पडतील.

निश्चित पिक्सेल मूल्यांना responsive डिझाइनसाठी relative rem किंवा em युनिट्समध्ये बदलायचे असल्यास, वेगवेगळे रूट फॉन्ट आकार rem मूल्यांवर कसा परिणाम करतात हे समजून घ्यायचे असल्यास, एखाद्या विशिष्ट एलिमेंटच्या फॉन्ट आकारावर आधारित em मूल्ये मोजायची असल्यास, किंवा वाचकाने आपल्या ब्राउझरमधील डीफॉल्ट फॉन्ट आकार बदलल्यावरही तुमचा लेआउट योग्य प्रमाणात स्केल व्हावा असे वाटत असल्यास, हे टूल त्यासाठी उपयोगी आहे.

रूट फॉन्ट आकार आणि rem मूल्ये

rem चे मूल्य पेजच्या रूट फॉन्ट आकाराच्या प्रमाणात मोजले जाते. डीफॉल्टने रूट फॉन्ट आकार 16px असतो, आणि सुरुवातीला 16px, 1rem आणि 1em हे तिन्ही एकसमान असतात. तुमच्या प्रोजेक्टमधील CSS मध्ये रूट फॉन्ट आकार वेगळा असेल, तर "रूट फॉन्ट आकार (px)" या फील्डमध्ये तो आकडा बदला — त्याबरोबर प्रत्येक rem मूल्य लगेच अपडेट होते. उदाहरणार्थ, रूट फॉन्ट आकार 20px वर सेट केला, तर 10px ही किंमत 0.5rem एवढी दाखवली जाईल. हे फील्ड 0 पेक्षा मोठी संख्या असणे आवश्यक आहे.

em संदर्भ फॉन्ट आकार

em चे मूल्य रूटवर आधारित नसून, ते ज्या एलिमेंटमध्ये बसते त्याच्याच फॉन्ट आकारावर अवलंबून असते, आणि हा आकार नेहमी रूटएवढाच असेल असे नाही. म्हणून em रूपांतरण अचूक ठेवण्यासाठी टूलमध्ये स्वतंत्र "em संदर्भ फॉन्ट आकार (px)" हे फील्ड दिलेले आहे — हा आकडा तुम्ही ज्या एलिमेंटसाठी em मोजत आहात त्याच्या फॉन्ट आकाराशी जुळवा. उदाहरणार्थ, em संदर्भ फॉन्ट आकार 20px असेल, तर 10px ही किंमत 0.5em एवढी दाखवली जाईल. डीफॉल्टने हा आकारही 16px असतो, आणि एलिमेंटचा फॉन्ट आकार रूटएवढाच असेल तेव्हा दोन्ही फील्ड सारखी ठेवावीत. हे फील्डही 0 पेक्षा मोठी संख्या असणे आवश्यक आहे.

मूल्ये प्रविष्ट करणे आणि निगेटिव्ह मूल्ये

"मूल्ये" या फील्डमध्ये तुम्ही px, rem किंवा em पैकी कोणत्याही एका युनिटमधील लांबी टाकू शकता, आणि टूल ती तिन्ही युनिट्समध्ये रूपांतरित करून दाखवते. या फील्डमध्ये निगेटिव्ह पिक्सेल मूल्येही टाकता येतात, त्यामुळे नकारात्मक मार्जिन किंवा पोझिशनिंगसाठी वापरली जाणारी मूल्येही तुम्ही याच पद्धतीने रूपांतरित करू शकता. उदाहरणार्थ, डीफॉल्ट 16px रूटवर -8px ही किंमत -0.5rem एवढी दाखवली जाईल.

निकाल कसे दिसतात

रूपांतरण केल्यावर पेजवर तुम्ही ठरवलेला रूट फॉन्ट आकार, तुम्ही ठरवलेला em संदर्भ फॉन्ट आकार आणि तिन्ही युनिट्समधील मूल्ये एकाच वेळी दिसतात, त्यामुळे कोणत्या रूट व संदर्भ आकारांवरून हे रूपांतरण झाले हे नेहमी स्पष्ट राहते. मूल्य वैध असल्यास पेजवर "तिन्ही युनिट्समध्ये रूपांतरित केले." असा संदेश दिसतो, जो रूपांतरण पूर्ण झाल्याचे सांगतो.

सामान्य px → rem सारणी

वर दिलेल्या तीन फील्डखेरीज, टूलमध्ये "सामान्य px → rem (16px बेस)" नावाची एक सारणी आहे. ही सारणी 16px च्या मानक रूट फॉन्ट आकारावर आधारित, वारंवार वापरल्या जाणाऱ्या पिक्सेल मूल्यांचे rem मध्ये रूपांतर दाखवते, जेणेकरून तेच आकडे पुन्हा पुन्हा फील्डमध्ये टाईप न करता पटकन पाहता येतील. अशा सामान्य आकड्यांचे rem मूल्य आधीच सारणीत दिसत असल्याने, वारंवार लागणाऱ्या मूल्यांसाठी दर वेळी हाताने भागाकार करावा लागत नाही.

चुकीचे इनपुट हाताळणे

"मूल्ये" फील्डमध्ये अवैध मूल्य टाकले, तर "रूपांतरित करण्यासाठी संख्या प्रविष्ट करा." हा त्रुटी संदेश दिसतो. "रूट फॉन्ट आकार (px)" फील्डमध्ये अवैध मूल्य टाकल्यास "रूट फॉन्ट आकार 0 पेक्षा मोठी संख्या असावी." असा संदेश दिसतो, आणि "em संदर्भ फॉन्ट आकार (px)" फील्डमध्ये अवैध मूल्य टाकल्यास "em संदर्भ फॉन्ट आकार 0 पेक्षा मोठी संख्या असावी." असा संदेश दिसतो. प्रत्येक त्रुटी संदेश ज्या फील्डमध्ये चूक झाली त्याच फील्डशी संबंधित असल्याने, तिन्हींपैकी नेमकी कोणती किंमत दुरुस्त करायची आहे हे लगेच कळते. या तिन्ही केसमध्ये संबंधित फील्ड योग्य पद्धतीने भरल्यावरच रूपांतरण पुढे चालते.

गोपनीयता

प्रत्येक रूपांतरण तुमच्या ब्राउझरमध्ये चालते. तुम्ही टाईप केलेले काहीही BroBroGo वर अपलोड केले जात नाही.

वारंवार विचारले जाणारे प्रश्न

px, rem आणि em मध्ये काय फरक आहे? px ही एक निश्चित लांबी आहे. rem हे पेजच्या रूट फॉन्ट आकाराच्या प्रमाणात मोजले जाते, त्यामुळे 16px रूटवर, 1rem हे 16px च्या समान असते. em हे ज्या एलिमेंटमध्ये ते बसते त्याच्या फॉन्ट आकाराच्या प्रमाणात मोजले जाते. rem मध्ये टाईप आणि स्पेसिंगचा आकार ठेवल्याने जेव्हा वाचक त्यांचा डीफॉल्ट फॉन्ट आकार बदलतो तेव्हा सर्व काही स्केल होते.

स्वतंत्र em संदर्भ आकार का आहे? em हे त्याच्या स्वतःच्या एलिमेंटच्या फॉन्ट आकाराच्या प्रमाणात असते, जे नेहमी रूट असेलच असे नाही. em योग्यरित्या वाचण्यासाठी em संदर्भ त्या एलिमेंटच्या फॉन्ट आकारावर सेट करा, आणि दोन्ही जुळत असताना ते रूटच्या समान ठेवा.

माझा रूट फॉन्ट आकार 16px नसेल तर? तुमच्या CSS शी जुळण्यासाठी रूट फॉन्ट आकार फील्ड बदला आणि प्रत्येक rem मूल्य झटपट अपडेट होईल. खालील जलद सारणी ही सामान्य 16px रूटसाठी एक सोयीस्कर मार्गदर्शक आहे ज्यापासून बहुतेक साइट्स सुरू होतात.