px चे em मध्ये रूपांतर Pixels ↔ Em मोफत ऑनलाइन सुरक्षित

तुम्ही px ला em मध्ये रूपांतरित का करता

Em हे CSS मधील सर्वात जुने सापेक्ष एकक आहे आणि सर्वाधिक वाद निर्माण करणारे. तुमच्याकडे डिझाइन फाइलमधील पिक्सेलमधील आकार आहे, बटणावर 20 px चे पॅडिंग, चिन्हाशेजारी 14 px ची जागा, शीर्षकासाठी 36 px, आणि तुम्हाला ते em मध्ये हवे आहे, म्हणजे ते ज्या मजकुराचे आहे त्याचे पालन करेल. तुम्ही px ला em मध्ये रूपांतरित करता तेव्हा तुम्ही विशिष्ट प्रश्न विचारत असता: हे सध्याच्या फॉन्ट आकाराचे किती पट आहे? उत्तर पान अंदाज करू शकत नाही अशा एका संख्येवर अवलंबून असते, मूल्य जिथे वापरले जाते तिथे लागू असलेला फॉन्ट आकार, म्हणून रूपांतरक ती संख्या एका रकान्यात ठेवतो आणि उघडपणे वापरतो.

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

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

सूत्र आणि पाया

em म्हणजे px भागिले फॉन्ट आकार

सूत्र एक भागाकार आहे: em = px ÷ पाया. 16 px च्या पायासह 24 px चे मूल्य 1.5 em बनते, 8 px चे 0.5 em आणि 20 px चे 1.25 em. पान निकालाशेजारी पाया दाखवते, जसे 24 px = 1.5 em (16 px), म्हणजे काय गृहीत धरले गेले ते तुम्हाला दिसते. गणित rem सारखेच आहे. अर्थ वेगळा आहे.

पाया काय आहे

rem साठी पाया म्हणजे मूळ घटकाचा फॉन्ट आकार. em साठी तो मूल्य जिथे वापरले जाते त्या घटकाचा फॉन्ट आकार आहे, किंवा font-size गुणधर्मासाठी पालकाचा. म्हणूनच em ला एकच उत्तर नाही: तीच स्टाइलशीट किंमत वेगवेगळ्या ठिकाणी वेगवेगळ्या पिक्सेल आकारांचा अर्थ देते. ज्या बटणाचा मजकूर 14 px आहे त्याचे पॅडिंग तुम्ही रूपांतरित करत असाल, तर पाया म्हणून 14 टाइप करा. 32 px च्या शीर्षकाचा समास रूपांतरित करत असाल, तर 32 टाइप करा.

तुम्हाला माहीत नसते तेव्हाचा डिफॉल्ट

तुम्हाला फक्त ढोबळ आकडा हवा असेल, तर पाया 16 वर राहू द्या, कोणीही न बदललेल्या ब्राउझरमधील सामान्य मजकुराचा आकार. निकाल सामान्य मुख्य मजकुराच्या भागासाठी बरोबर असतो, आणि घटकाचा आकार वेगळा निघाला तरी तो तुम्हाला प्रमाणाची कल्पना देतो.

रूपांतरण काय राखते आणि काय नाही

ते मजकुराशी प्रमाण राखते

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

ते पानासाठी एकच संख्या देऊ शकत नाही

याबाबत काळजी घ्यायला हवी. Em हे मुळाशी नव्हे तर घटकाच्या स्वतःच्या फॉन्ट आकाराशी, किंवा font-size साठी त्याच्या पालकाच्या, सापेक्ष आहे. म्हणून पानासाठी एकच उत्तर नाही: तोच 1.5 em हा 16 px घटकात 24 px आणि 24 px घटकात 36 px असतो, आणि em आत em गुणले जाते. पानावरील आकडा रकान्यातील पायासाठी बरोबर आहे आणि दुसऱ्या कशासाठी नाही. सर्वत्र टिकणारी एकच संख्या हवी असेल, तर त्यासाठीच rem आहे. तुलना करायला px ला rem मध्ये रूपांतरित करा आणि तेच पिक्सेल मूल्य कसे वागते ते पाहा.

पूर्णांकन

16 ने भागणे अनेक आकारांसाठी स्वच्छ मूल्ये देते आणि इतरांसाठी आवर्ती दशांश. 0.8125 em सारखे मूल्य स्टाइलशीटमध्ये चालते, पण अचूक आकाराला फरक पडत नसेल तर तुम्ही 0.8 किंवा 0.85 पर्यंत पूर्णांकित करणे पसंत करू शकता. अचूकता महत्त्वाची असेल तिथे पूर्ण आकडा ठेवा.

नेस्टिंग सापळा

em कसे चक्रवाढ होते

समजा यादीला font-size: 0.875em आहे आणि तिच्या बाबींनाही font-size: 0.875em आहे. यादी तिच्या पालकाच्या 87.5% आहे. प्रत्येक बाब यादीच्या 87.5% आहे, जे पालकाच्या सुमारे 76.6% आहे. बाबीत नेस्ट केलेली यादी पुन्हा कमी होते, सुमारे 67% पर्यंत. तीन पातळ्यांनंतर मजकूर खूप लहान असतो, आणि ते कोणीही मुद्दाम लिहिलेले नसते. em चक्रवाढ होते असे म्हणण्याचा अर्थ हाच आहे.

px ला em मध्ये रूपांतरित करताना ते का महत्त्वाचे आहे

तुम्ही font-size साठी पिक्सेल मूल्य em मध्ये रूपांतरित केले, तर तुम्ही वापरायचा पाया घटकाचा स्वतःचा नव्हे तर पालकाचा फॉन्ट आकार आहे. अनेक चुका चुकीचा वापरण्यातून येतात. पॅडिंग आणि समासासारख्या इतर गुणधर्मांसाठी पाया घटकाचा स्वतःचा फॉन्ट आकार आहे. नियम सांगायला सोपा आणि विसरायला सोपा आहे: font-size वर पाहतो, बाकी सर्व स्वतःकडे पाहते.

आश्चर्य कसे टाळावे

मजकुराला अनुसरणाऱ्या जागेसाठी em वापरा, आणि फॉन्ट आकारांसाठी rem. त्यामुळे फॉन्ट आकार कधीही चक्रवाढ होत नाहीत, कारण ते मुळाचा संदर्भ घेतात, आणि जागा अजूनही स्वतःच्या मजकुराला अनुसरते. बहुतेक आधुनिक स्टाइलशीट ज्या संयोजनावर स्थिरावतात ते हेच आहे.

सामान्य आकार

पानाच्या तळाशी तक्ता

रूपांतरकाखाली तुम्ही ठरवलेल्या पायावरील सामान्य आकारांचा तक्ता आहे: 8 px म्हणजे 0.5 em, 10 px म्हणजे 0.625, 12 px म्हणजे 0.75, 14 px म्हणजे 0.875, 16 px म्हणजे 1, 18 px म्हणजे 1.125, 20 px म्हणजे 1.25, 24 px म्हणजे 1.5, 32 px म्हणजे 2, 48 px म्हणजे 3 आणि 64 px म्हणजे 4. 16 च्या पायावर हे rem सारखेच आकडे आहेत, म्हणूनच लोक दोन्हींची गल्लत करतात. फरक 16 कशाचे प्रतिनिधित्व करते यात आहे.

घटकाशी जुळवण्यासाठी पाया बदलणे

लहान बटणासाठी तुम्ही पाया 14 वर ठेवला, तर तक्ता बदलतो: 14 px आता 1 em आहे, 7 px म्हणजे 0.5 em आणि 21 px म्हणजे 1.5 em. करून पाहा, आणि 1.5 em चे पॅडिंग 14 px च्या बटणात 18 px च्या बटणापेक्षा वेगळ्या पिक्सेल आकाराचे कसे असते आणि ते उपयुक्त का आहे ते तुम्हाला दिसेल.

इथे px ला em मध्ये रूपांतरित कसे करावे

पिक्सेल मूल्य टाइप करा

पहिल्या रकान्यात पिक्सेलमधील आकार टाका. दशांश स्वीकारले जातात.

em ज्याचा संदर्भ घेते तो फॉन्ट आकार ठरवा

घटकाचा फॉन्ट आकार टाइप करा, किंवा तुम्ही font-size रूपांतरित करत असाल तर त्याच्या पालकाचा. तुम्हाला खात्री नसेल, तर 16 ठेवा आणि निकाल अंदाजे समजा.

em मूल्य कॉपी करा

आकडा तुमच्या CSS मध्ये एककासह वापरा, जसे padding: 1.25em. एकक नसलेली संख्या बहुतेक गुणधर्मांसाठी वैध नाही.

ही एकके कुठून येतात

धातूच्या टंकातील em

em वेबपेक्षा जुने आहे. धातूच्या टंकात ते ओतलेल्या ठोकळ्याची रुंदी होती, कॅपिटल M वरून नाव दिलेली, आणि छापील ओळीतील आडव्या जागेचे नैसर्गिक एकक होते. टायपोग्राफर अजूनही em डॅश आणि em स्पेसबद्दल बोलतात. CSS मध्ये कल्पना सैल स्वरूपात टिकून आहे: एक em म्हणजे सध्याच्या फॉन्टचा आकार.

पिक्सेल आणि rem

CSS पिक्सेल ही सोयीच्या वाचन अंतरावर दिसणारी इंचाच्या सुमारे 1/96 ची संदर्भ लांबी आहे, तुमच्या स्क्रीनवरील ठिपका नाही. विकसकांना सापेक्ष पण कधीही चक्रवाढ न होणारे एकक देण्यासाठी rem जोडले गेले: ते मूळ घटकाचे em आहे. पिक्सेल, em आणि rem मिळून तीन गरजा भागवतात: निश्चित आकार, मजकुराशी सापेक्ष आकार आणि पानाशी सापेक्ष आकार.

em योग्य निवड असते तेव्हा

बटणे आणि फॉर्म रकान्यांच्या आतील पॅडिंग

padding: 0.5em 1em असलेले बटण कोणत्याही मजकूर आकारात प्रमाणात सारखे दिसते. लेबल मोठे करा आणि संपूर्ण बटण त्यासोबत वाढते, जे साधनपट्टीत आणि मुख्य बॅनरमध्ये वापरल्या जाणाऱ्या घटकाकडून तुम्हाला हवे असते.

चिन्हांशेजारची जागा

चिन्हानंतर मथळा असेल तर मथळ्यासोबत प्रमाणात बदलणारे अंतर लागते. 0.4em चा समास ते करतो; 6px चा समास करत नाही.

शीर्षके आणि परिच्छेदांभोवतीचे समास

कागदपत्रातील उभी लय राखणे सोपे असते जेव्हा परिच्छेदातील जागा em मध्ये असते, कारण ती परिच्छेदाच्या आकाराला अनुसरते. शीर्षकाचा em मधील समास वेगवेगळ्या ब्रेकपॉइंटवर शीर्षक आकार बदलते तसा प्रमाणात राहतो.

मीडिया क्वेरी

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

px ला em मध्ये रूपांतरित करताना सापळे

चुकीचा पाया वापरणे

सर्वात सामान्य चूक. font-size साठी पालकाचा आकार वापरा; बाकी सर्वांसाठी घटकाचा स्वतःचा. पाया टाइप करण्यापूर्वी तुम्ही कोणता गुणधर्म रूपांतरित करत आहात ते तपासा.

पालकही em मध्ये असू शकतो हे विसरणे

पालकाचा फॉन्ट आकार स्वतःच em मध्ये असेल, तर खरा आकार जाणण्यासाठी तुम्हाला साखळी वरच्या दिशेने अनुसरावी लागते. स्टाइलशीट गुंतागुंतीची झाली की फॉन्ट आकार rem वर आणा आणि जागेसाठी em ठेवा.

संपूर्ण घटकासाठी एकच आकडा अपेक्षित करणे

वेगवेगळ्या आकारांचा मजकूर असलेल्या घटकाला त्याच्या भागांसाठी एकच em मूल्य नसते. प्रत्येक भाग त्याच्या स्वतःच्या पायाशी रूपांतरित करा.

एकाच गुणधर्मासाठी em आणि rem मिसळणे

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

रूपांतरणापूर्वी लोक विचारत असलेले प्रश्न

16 px म्हणजे किती em?

लागू असलेला फॉन्ट आकार 16 px असेल तर एक. घटकाचा फॉन्ट आकार 20 px असेल, तर 16 px म्हणजे 0.8 em.

em, rem पेक्षा चांगले आहे का?

कोणतेही चांगले नाही. फॉन्ट आकार आणि जागतिक मांडणीसाठी rem चांगले आहे. स्वतःच्या मजकुराला अनुसरायला हव्या असलेल्या जागेसाठी em चांगले आहे.

माझे पॅडिंग अपेक्षेपेक्षा मोठे का आहे?

कारण ते घटकाच्या फॉन्ट आकाराशी सापेक्ष आहे, जो तुम्ही गृहीत धरलेल्यापेक्षा मोठा असू शकतो. ब्राउझरच्या विकसक साधनांमध्ये गणलेला फॉन्ट आकार तपासा.

मी दशांश वापरू शकतो का?

हो. 0.625em आणि 1.333em सारखी मूल्ये सामान्य आहेत.

माझी संख्या अपलोड होते का?

नाही. गणित तुमच्या ब्राउझरमध्ये चालते आणि काहीही कुठेही पाठवले जात नाही.

मी परत कसे जाऊ?

em ला px मध्ये रूपांतरित करा सह, जे भागण्याऐवजी गुणते.

px ला em मध्ये रूपांतरित करताना शहाणपणाने निवडणे

मूल्य कशाचे आहे ते ठरवा

ते मजकुराचे असेल, तर em योग्य आहे. ते पानाचे असेल, जसे स्तंभ रुंदी किंवा विभागातील अंतर, तर rem किंवा व्ह्यूपोर्ट एकक अधिक योग्य आहे. px ते vw आकाराला स्क्रीन रुंदीचा वाटा म्हणून व्यक्त करते.

हेतू टिप्पणीत लिहा

padding: 0.75em 1.25em; /* 12px 20px at 16px */ सारखी ओळ तर्क दृश्य करते. नंतर फॉन्ट आकार बदलतो तेव्हा आकड्यांचा हेतू काय होता हे तुम्हाला कळेल.

घटकाचा फॉन्ट आकार एकाच ठिकाणी ठेवा

घटकाच्या मूळ घटकावर फॉन्ट आकार ठरवा आणि आतील सर्वाला त्याचा संदर्भ घेऊ द्या. मग घटकाच्या आतील em मूल्यांचा अर्थ सर्वत्र सारखा असतो, आणि तुम्ही एकाच पायाशी px ला em मध्ये रूपांतरित करू शकता.

px ला em मध्ये रूपांतरित करताना चांगल्या सवयी

एका वेळी एक घटक px ला em मध्ये रूपांतरित करा

संपूर्ण स्टाइलशीटसाठी एकाच झटक्यात px ला em मध्ये रूपांतरित करण्याचा प्रयत्न करू नका. कार्ड किंवा बटणासारखा एक घटक घ्या, त्याचा फॉन्ट आकार ठरवा, आणि त्याचे प्रत्येक जागेचे मूल्य त्या आकाराशी रूपांतरित करा. घटक पूर्ण झाल्यावर त्याची दोन-तीन मजकूर आकारांत चाचणी करा. मग पुढच्याकडे जा.

गोल नव्हे तर विषम मूल्यांसाठी कॅल्क्युलेटर वापरा

8, 16 आणि 24 पिक्सेलसारखी मूल्ये 16 च्या पायावर नीटनेटके em आकडे बनतात. 22 किंवा 13 सारखी विषम मूल्ये लांब दशांश देतात. त्यांसाठी px ला em मध्ये रूपांतरित करताना, रचनेला खरोखर अचूक आकडा हवा आहे की जवळचे गोल em मूल्य तितकेच चांगले ठरेल हे ठरवा. डिझायनर अनेकदा पूर्णांकन करायला खूश असतात, आणि नीटनेटकी स्टाइलशीट सांभाळायला सोपी असते.

पायाची नोंद ठेवा

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

rem समतुल्याशी तुलना करा

मूल्यासाठी em योग्य की rem याची तुम्हाला खात्री नसेल, तर px ला em आणि rem दोन्हींमध्ये रूपांतरित करा आणि मजकूर आकार बदलतो तेव्हा काय घडायला हवे ते विचारा. मूल्याने घटकाच्या स्वतःच्या मजकुराला अनुसरायला हवे, तर em घ्या. त्याने पानाला अनुसरायला हवे, तर rem घ्या.

संबंधित रूपांतरक

साधनांचे तेच कुटुंब शेजारची रूपांतरणे समाविष्ट करते. पिक्सेलकडे परत जायला em ते px वापरा. मुळाशी सापेक्ष आकारांसाठी px ते rem आणि rem ते px आहेत, आणि स्क्रीनशी सापेक्ष आकारांसाठी px ते vw आणि vw ते px. त्याच स्टाइलशीटच्या रंगांसाठी HEX ते RGB आणि HEX ते HSL संकेतने हाताळतात.

एक सोडवलेले उदाहरण

समजा बटणाचे लेबल 14 px आहे आणि रचना बटणाला 10 px उभे पॅडिंग आणि 20 px आडवे पॅडिंग देते. तुम्ही पाया म्हणून 14 टाइप करता, 10 टाइप करून 0.714 em वाचता, 20 टाइप करून 1.429 em वाचता. स्टाइलशीटमध्ये तुम्ही padding: 0.714em 1.429em लिहिता. तेच बटण 18 px लेबलच्या मुख्य भागात वापरले जाते तेव्हा पॅडिंग 12.9 px आणि 25.7 px होते, प्रमाणात. तुम्ही 10px आणि 20px लिहिले असते, तर मोठ्या मजकुराभोवती बटण सडपातळ दिसले असते.

एक संक्षिप्त तपासणी यादी

रूपांतरणापूर्वी

मूल्य कोणत्या गुणधर्माचे आहे ते ठरवा, आणि ते कोणत्या फॉन्ट आकाराशी सापेक्ष असायला हवे ते शोधा.

रूपांतरण करताना

पिक्सेल मूल्य आणि योग्य पाया टाइप करा, आणि em आकडा एककासह कॉपी करा.

रूपांतरणानंतर

ब्राउझरमध्ये घटकाचा फॉन्ट आकार बदला आणि जागा अनुसरते का ते तपासा. चक्रवाढ होणारी नेस्टेड em मूल्ये शोधा.

सामान्य चुका

पॅडिंगसाठी मूळ आकार पाया म्हणून वापरणे

ते rem चे काम आहे. Em घटकाच्या स्वतःच्या फॉन्ट आकाराचा संदर्भ घेते.

प्रत्येक फॉन्ट आकारासाठी em वापरणे

नेस्टेड em फॉन्ट आकार चक्रवाढ होतात आणि तुम्हाला चकित करतात. फॉन्ट आकारांसाठी rem वापरा.

दिसायला नीटनेटक्या पण चुकीच्या संख्येत पूर्णांकन करणे

मोठ्या फॉन्टने गुणल्यावर 1.43 हे 1.5 सारखे नसते. पुरेसे अंक ठेवा.

तुमच्या संख्या तुमच्या उपकरणावरच राहतात

गणना स्थानिक पातळीवर घडते. तुमची मूल्ये तुमचा स्वतःचा ब्राउझर वापरतो आणि काहीही कुठेही पाठवले जात नाही. नंतर हटवायला काही नाही आणि तयार करायला खाते नाही. px ला em मध्ये रूपांतरित करण्याचा हा साधा मार्ग आहे.

सारांश

इथे px ला em मध्ये रूपांतरित करण्यासाठी पिक्सेलमधील आकार आणि ज्याच्याशी तो सापेक्ष आहे तो फॉन्ट आकार टाइप करा, आणि em = px ÷ पाया हे सूत्र वापरून निकाल लगेच वाचा. रूपांतरण मूल्य जिथे वापरले जाते तिथे लागू असलेल्या फॉन्ट आकाराशी सापेक्ष प्रमाण राखते. ते पानासाठी एकच उत्तर देऊ शकत नाही: em घटकाच्या स्वतःच्या फॉन्ट आकाराशी, किंवा font-size साठी पालकाच्या, सापेक्ष आहे, म्हणून तोच 1.5 em हा 16 px घटकात 24 px आणि 24 px घटकात 36 px असतो, आणि em आत em गुणले जाते. सर्वत्र टिकणाऱ्या एका संख्येसाठी rem वापरा. काहीही अपलोड होत नाही.