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

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

शैलीपत्रक शीर्षकावर margin-bottom: 0.75em, बटणावर padding: 0.4em 0.9em आणि मजकुराच्या खंडावर 1.3em चे line-height सांगते. ही चांगली, लवचिक मूल्ये आहेत, आणि त्यांची कल्पना करणे जवळजवळ अशक्य आहे. तो समास किती पिक्सेल आहे? बटणाचे padding डिझाइन फाइलमधील 6 px आणि 14 px शी जुळते का? हे शोधण्यासाठी तुम्ही em ला px मध्ये रूपांतरित करता: em ज्या फॉन्ट आकाराचा संदर्भ घेतो त्याने गुणता, आणि उत्तर डिझाइन साधने वापरतात त्या एककात वाचता. कोड तपासताना, मॉकअपशी बिल्ड पडताळताना, अंतराची समस्या शोधताना किंवा तयार घटक पिक्सेलमध्ये विचार करणाऱ्या व्यक्तीकडे सोपवताना विकसक हा प्रश्न विचारतात.

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

गणन तुमच्या ब्राउझरमध्ये होते आणि काहीही अपलोड केले जात नाही. खाली तुम्हाला सूत्र, योग्य आधार कसा शोधावा, रूपांतर काय टिकवते आणि काय टिकवू शकत नाही, आत ठेवलेली em मूल्ये कशी गुणली जातात, विकसकांना em ला px मध्ये रूपांतरित करण्याची गरज केव्हा पडते आणि em-आधारित शैलीपत्रक समजण्याजोगे ठेवणाऱ्या काही सवयी सापडतील.

सूत्र आणि आधार

px बरोबर em गुणिले फॉन्ट आकार

सूत्र हा एकच गुणाकार आहे: px = em × आधार. 16 px च्या आधारासह 1.5 em चे 24 px होते, 0.75 em चे 12 px आणि 2 em चे 32 px. पान निकालाशेजारी आधार छापते, म्हणून 1.5 em = 24 px (16 px) अशी ओळ नेमके काय गृहीत धरले ते सांगते. घटकाचा फॉन्ट आकार 20 px असेल, तर 20 टाइप करा, आणि 1.5 em चे 30 px होते.

तुमच्या ब्राउझरमध्ये आधार शोधणे

विकसक साधने उघडा, घटक निवडा आणि त्याचा गणलेला फॉन्ट आकार पाहा. font-size शिवाय इतर कोणत्याही गुणधर्मासाठी आधार क्षेत्रात टाइप करायचा तोच आकडा आहे. font-size साठी स्वतः त्याऐवजी पालक निवडा आणि त्याचा गणलेला आकार वाचा. त्याला काही सेकंद लागतात आणि अंदाज पूर्णपणे दूर होतो.

तुम्हाला पान दिसत नसेल तेव्हा

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

रूपांतर काय टिकवते आणि काय टिकवू शकत नाही

ते मजकुराशी असलेले प्रमाण टिकवते

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

ते पानासाठी एकच उत्तर देऊ शकत नाही

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

पूर्णांक करणे

पूर्णांक आधाराने गुणल्याने बहुतेक मूल्यांसाठी अचूक निकाल मिळतात. आधार दशांश असेल, उदाहरणार्थ 13.5 px, तर 1.2 em सारखे मूल्य 16.2 px देते. ब्राउझर अपूर्णांक पिक्सेल हाताळतात, पण तुम्हाला पूर्ण पिक्सेल हवे असतील, केसासारख्या सीमारेषेसाठी किंवा जाळीवरील चिन्हासाठी, तर जाणीवपूर्वक पूर्णांक करा आणि ते कसे दिसते ते तपासा.

आत ठेवलेली em मूल्ये कशी गुणली जातात

यादीच्या आत यादी

ज्या पानाचा मुख्य मजकूर 16 px आहे ते घ्या. एका यादीला font-size: 0.875em आहे, जे 14 px आहे. तिच्या आतील नोंदींनाही font-size: 0.875em आहे, जे 14 × 0.875 = 12.25 px आहे. नोंदीच्या आत असलेली यादी पुन्हा तसेच करते: 10.7 px. तीन स्तर खोल गेले की मजकूर लहान होतो, आणि तसे व्हावे असे कोणीही ठरवलेले नसते. तुम्ही घटकासाठी em ला px मध्ये रूपांतरित करता आणि उत्तर खूप लहान दिसते, तेव्हा आत ठेवणे ही तपासायची पहिली गोष्ट आहे.

साखळी चढून जाणे

आत ठेवलेल्या em चा खरा पिक्सेल आकार जाणण्यासाठी खाली जाताना प्रत्येक मूल्याने आधार गुणा: 16 × 0.875 × 0.875 = 12.25. रूपांतरक एका वेळी एक पायरी करतो. साखळीसाठी पहिले मूल्य रूपांतरित करा, उत्तर दुसऱ्यासाठी आधार म्हणून वापरा आणि पुढे चालू ठेवा. ब्राउझर करतो तेच हे गणित आहे.

ते साचण्यापासून कसे थांबवावे

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

सामान्य मूल्ये

पानाच्या तळाशी असलेला तक्ता

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

दोन आधार शेजारी-शेजारी वापरून पाहा

14 च्या आधारासह 1.5 टाइप करा, मग 20 च्या आधारासह. तुम्हाला 21 आणि 30 पिक्सेल मिळतात. em आणि rem यांच्यातील संपूर्ण फरक एका प्रयोगात हाच आहे: तोच आकडा, दोन घटक, दोन आकार.

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

em मूल्य टाइप करा

पहिल्या क्षेत्रात em मधील आकार टाका. दशांश स्वीकारले जातात, म्हणून 0.714 तसेच 1 चालते.

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

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

पिक्सेल मूल्य वाचा

उत्तर लगेच दिसते, शेजारी आधार दाखवून. ते तुमच्या नोंदीत कॉपी करा किंवा डिझाइन फाइलशी तुलना करा.

ही एकके कुठून आली

em

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

पिक्सेल आणि rem

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

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

डिझाइन फाइलशी बिल्ड तपासणे

डिझाइनर पिक्सेलमध्ये फाइल सोपवतो, आणि कोड em मध्ये असतो. पान जुळते का ते तपासण्यासाठी तुम्ही प्रत्येक घटकाच्या फॉन्ट आकाराने em ला px मध्ये रूपांतरित करता. 14 px चे लेबल आणि 0.714em 1.429em चे padding असलेले बटण 10 px आणि 20 px निघायला हवे, आणि डिझाइन 12 आणि 24 सांगत असेल, तर दोघांपैकी एक चुकीचे आहे.

अंतराचा दोष शोधणे

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

अपरिचित कोड वाचणे

वारशाने मिळालेली शैलीपत्रके अशा em मूल्यांनी भरलेली असतात ज्यांचे पिक्सेल आकार तुम्हाला पुन्हा उभे करावे लागतात. योग्य आधारांसह त्यांपैकी मुख्य मूठभर रूपांतरित केल्याने तुम्हाला डिझाइनचा नकाशा मिळतो.

दस्तऐवजीकरण आणि चाचण्या लिहिणे

पान तपासणारे लोक जे दिसते ते पिक्सेलमध्ये वर्णन करतात. padding 0.9em आहे असे सांगणारा विकसक परीक्षकाला फारसे काही सांगत नाही; 12.6 px काहीतरी सांगते. रूपांतर केल्याने दोन्ही बाजू एकमेकांना समजतात.

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

चुकीचा आधार वापरणे

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

em मधील पालक विसरणे

पालकाचा आकारही em मध्ये असेल, तर तुम्हाला साखळीचे अनुसरण करावे लागते. ते लहान करण्यासाठी विकसक साधनांतील गणलेले मूल्य वापरा.

पडद्यावर तेच पिक्सेल दिसतात असे गृहीत धरणे

CSS पिक्सेल म्हणजे उपकरण पिक्सेल नव्हे. उच्च घनतेच्या पडद्यावर एक CSS पिक्सेल दोन किंवा तीन उपकरण पिक्सेल असू शकतो. रूपांतर CSS पिक्सेल देते, डिझाइन साधने आणि शैलीपत्रक सामायिक करतात ते एकक.

उत्तराला वचन मानणे

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

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

1 em म्हणजे किती पिक्सेल?

लागू असलेल्या फॉन्ट आकाराइतके: डीफॉल्टवर सामान्य मुख्य मजकुरासाठी 16 px, 24 px च्या घटकात 24 px.

2 em म्हणजे किती पिक्सेल?

लागू असलेल्या फॉन्ट आकाराचे दुप्पट. 16 px वर ते 32 px आहे.

माझा ब्राउझर वेगळे काहीतरी का दाखवतो?

घटकाचा खरा फॉन्ट आकार तुम्ही टाइप केलेल्या आधारापेक्षा वेगळा आहे. विकसक साधनांत गणलेला फॉन्ट आकार वाचा.

em आणि rem सारखेच आहेत का?

नाही. em घटकाशी सापेक्ष आहे, rem मुळाशी.

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

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

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

px ते em सह, जे गुणण्याऐवजी भागते.

em शैलीपत्रक समजण्याजोगे ठेवणाऱ्या सवयी

आधारावर टिप्पणी द्या

padding: 0.75em 1.25em; /* 12px 20px at 16px */ अशी ओळ काही अक्षरे घेते आणि पुढच्या वाचकाचे रूपांतर वाचवते. तुम्ही गृहीत धरलेला आधार ती नोंदवते.

प्रत्येक घटकासाठी फॉन्ट आकार एकदा ठरवा

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

अंतरासाठी em, टंकासाठी rem ठेवा

बहुतेक शैलीपत्रके यावर स्थिरावतात असे हे विभाजन आहे, आणि ते गणित सोपे ठेवते. पडद्याशी सापेक्ष आकारांसाठी px ते vw आणि vw ते px ही साधने आहेत.

वेगळ्या मजकूर आकारात चाचणी घ्या

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

अवघड प्रकरणांसाठी एक पद्धत

बाहेरून आत काम करा

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

सोपे करायचे की नाही ते ठरवा

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

संबंधित कन्व्हर्टर

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

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

समजा तुम्ही बटण घटकाचा आढावा घेत आहात. लेबल 14 px आहे, CSS padding: 0.714em 1.429em सांगते आणि चिन्ह व लेबल यांच्यात 0.5em चे अंतर आहे. तुम्ही आधार म्हणून 14 टाइप करता, मग 0.714 आणि 10 px वाचता, 1.429 आणि 20 px वाचता, 0.5 आणि 7 px वाचता. डिझाइन फाइल 10, 20 आणि 8 सांगते. तिघांपैकी दोन जुळतात, म्हणून तुम्ही अंतर पाहता: 14 च्या आधारावर 8 px म्हणजे 0.571 em, आणि कोणीतरी त्याचे 0.5 केले. तुम्ही आढाव्यात ते मांडता, आणि दुरुस्ती म्हणजे एक संख्या.

एक लहान तपासणी यादी

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

em ज्याचा संदर्भ घेतो तो फॉन्ट आकार विकसक साधनांतून किंवा कोडमधील फॉन्ट आकारांच्या साखळीतून शोधा.

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

em मूल्य टाइप करा, आधार ठरवा आणि पिक्सेल वाचा, निकालाशेजारी दाखवलेला आधार नोंदवून.

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

डिझाइन फाइलशी तुलना करा. आकडे वेगळे असतील, तर कोडवर संशय घेण्यापूर्वी आधार तपासा.

सामान्य चुका

तपासल्याशिवाय 16 वापरणे

तो फक्त तेव्हाच बरोबर असतो जेव्हा घटकाचा फॉन्ट आकार 16 px असतो.

em आणि rem चा गोंधळ

ते सारखे दिसतात आणि वेगळे वागतात. प्रत्येकासाठी योग्य पान वापरा.

em साचतो हे विसरणे

आत ठेवलेल्या घटकातील मूल्य तुम्ही न पाहिलेल्या आकाराशी सापेक्ष असते. साखळीचे अनुसरण करा.

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

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

सारांश

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