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

तुम्हाला rem ला px मध्ये रूपांतरित का करावे लागते

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

रूपांतरण सोपे आहे; पानाला किंमत देते ते म्हणजे पाया. rem हा आकार नाही, तो आकाराचा गुणक आहे, मूळ घटकाचा फॉन्ट आकार. कोणीही वेगळे सांगितले नाही अशा ब्राउझरमध्ये तो आकार 16 px असतो, म्हणून 1 rem म्हणजे 16 px, 2.25 rem म्हणजे 36 px आणि 0.8125 rem म्हणजे 13 px. पण मूळ आकार स्टाइलशीट बदलू शकते, आणि वाचक ब्राउझरमध्ये बदलू शकतो, आणि मग पानावरील प्रत्येक rem मूल्य त्यासोबत हलते. त्यामुळे पान पाया लपवण्याऐवजी तो मागते आणि वापरते.

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

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

px म्हणजे rem गुणिले पाया

सूत्र एक गुणाकार आहे: px = rem × पाया. 16 px च्या नेहमीच्या पायासह 1.5 rem चे 24 px होते, 0.75 rem चे 12 px आणि 4 rem चे 64 px. पान निकालाशेजारी पाया छापते, म्हणून 1.5 rem = 24 px (16 px) ही ओळ काय गृहीत धरले ते सांगते आणि ते तुमच्या प्रकल्पाशी जुळते का हे तुम्हाला लगेच दिसते.

तुमचा पाया शोधणे

स्टाइलशीटमध्ये font-size ठरवणारा html किंवा :root वरचा नियम शोधा. तो नसेल, तर पाया ब्राउझर डिफॉल्ट 16 px आहे. असेल, जसे 62.5%, तर 16 चा तितका टक्का घ्या: 62.5% म्हणजे 10 px. ब्राउझरच्या विकसक साधनांमध्ये तुम्ही मूळ घटक निवडून त्याचा गणलेला फॉन्ट आकारही वाचू शकता, जो पाया रकान्यात टाइप करायचा आकडा आहे.

मूळ आकार द्रवरूप असतो तेव्हा

काही संकेतस्थळे clamp व्यंजक वापरून मूळ आकार विंडोसोबत वाढवतात. तेव्हा 1 rem ला एकच पिक्सेल मूल्य अजिबात नसते: ते फोनवर 15 px आणि रुंद मॉनिटरवर 18 px असते. अशा बाबतीत कोणतेही रूपांतरण हे छायाचित्र असते. तुम्हाला ज्या रुंदीची काळजी आहे तिथे दिसणारा पाया टाइप करा, आणि उत्तर फक्त त्या रुंदीसाठी वैध आहे हे समजून घ्या.

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

ते प्रमाण राखते

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

ते तुमच्या वाचकाची सेटिंग जाणू शकत नाही

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

पूर्णांकन

पाया सहसा पूर्ण संख्या असल्याने गुणाकाराचा निकाल सहसा अचूक असतो. 16 च्या पायावर 0.8125 rem बरोबर 13 px आहे; 0.6875 rem बरोबर 11 px. लांब दशांश आला, तर rem मूल्य तुम्ही टाइप केलेल्यापेक्षा वेगळ्या पायावरून गणले गेले असल्याचे ते लक्षण आहे.

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

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

पानात तुम्ही ठरवलेल्या पायावर सामान्य rem आकडे ज्या पिक्सेल मूल्यांशी जुळतात त्यांचा तक्ता आहे: 0.5 rem म्हणजे 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. अंतर आणि अक्षर प्रमाणांमध्ये हीच मूल्ये सर्वात जास्त वेळा येतात, आणि ती तोंडपाठ असल्याने स्टाइलशीट एका दृष्टिक्षेपात वाचनीय होते.

स्टाइलशीट पिक्सेलमध्ये वाचणे

उपयुक्त सराव म्हणजे तुम्ही न लिहिलेली स्टाइलशीट घेऊन तिची मुख्य मूल्ये एकदा पिक्सेलमध्ये भाषांतरित करणे, निकाल टिपेत लिहून. 1 rem चा मुख्य मजकूर आकार, 1.5 आणि 2.25 rem ची शीर्षके, 2 rem चे कंटेनर अंतर: पिक्सेलमध्ये 16, 24, 36 आणि 32. असे पाहिले की रचनेचा तर्क दिसतो, आणि तुम्ही कॅल्क्युलेटरशिवाय रचना फाइलशी तुलना करू शकता.

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

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

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

पाया ठरवा

तुमचा CSS मूळ आकार बदलत नसेल तर तो 16 वर ठेवा. बदलत असेल तर बदला. तुम्ही टाइप करता तसा निकाल अद्ययावत होतो.

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

उत्तर लगेच दिसते, शेजारी पाया दाखवून, म्हणजे काय गृहीत धरले ते तुम्हाला सांगता येते. ते तुमच्या टिपांत कॉपी करा किंवा रचना फाइलशी तुलना करा.

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

CSS पिक्सेल

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

rem

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

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

बांधणी रचना फाइलशी तपासणे

डिझायनर पिक्सेलमधील फाइल देतो; विकसकाने कोड rem मध्ये लिहिला. पान जुळते का ते तपासायला ते rem ला px मध्ये रूपांतरित करतात आणि संख्यांची तुलना करतात. विसंगती लगेच दिसते: 1.375 rem म्हणजे 22 px, आणि रचना 24 म्हणत असेल, तर त्यांपैकी एक चुकीचे आहे.

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

तुम्हाला स्टाइलशीट वारसा मिळते तेव्हा rem मूल्ये खरे आकार लपवतात. त्यांपैकी काही मुख्य रूपांतरित केल्याने तुम्हाला रचनेचा नकाशा मिळतो: अक्षरे किती मोठी आहेत, गटर किती रुंद आहेत, ब्रेकपॉइंट कुठे येतात.

दोष अहवाल आणि दस्तऐवजीकरण लिहिणे

पानाची चाचणी घेणारे लोक त्यांना जे दिसते ते पिक्सेलमध्ये सांगतात. पॅडिंग 2.5 rem आहे असे म्हणणाऱ्या विकसकाचा चाचणीकर्त्याला फारसा अर्थ लागत नाही; 40 px चा लागतो. रूपांतरण दोन बाजूंना एकमेकांना समजू देते.

पिक्सेलमध्ये अचूक असायला हवी मूल्ये ठरवणे

काही गोष्टी उपकरण पिक्सेलच्या अचूक संख्येत असाव्या लागतात, नाहीतर त्या मऊ दिसतात: एक-पिक्सेलची किनार, 24 px जाळ्यावर काढलेले चिन्ह. आकार पिक्सेल जाळ्यावर उतरायला हवा असेल, तर rem ला px मध्ये रूपांतरित केल्याने तुमच्या पायावर तो उतरतो की नाही ते कळते.

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

बदललेला मूळ आकार विसरणे

मूळ 62.5% वर किंवा clamp व्यंजकावर ठेवला असेल, तर 16 चा प्रमाण गुणक लागू होत नाही. निकाल दोन पायांच्या गुणोत्तराने चुकतो. नेहमी आधी पाया तपासा.

rem ला em शी गल्लत करणे

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

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

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

खूप लवकर पूर्णांकन करणे

तुम्ही 13.333 px ला 13 पर्यंत पूर्णांकित केले आणि मग परत रूपांतरित केले, तर तुम्हाला 0.8125 rem मिळते, तुम्ही सुरू केलेले 0.8333 नाही. महत्त्वाचे असेल तेव्हा मूळ rem मूल्य ठेवा.

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

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

सोळा, ज्या ब्राउझरचा डिफॉल्ट बदललेला नाही त्यात.

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

डिफॉल्ट पायावर बत्तीस. 10 च्या पायावर ते 20 असेल.

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

वाचकाच्या सेटिंगने किंवा स्टाइलशीटमधील नियमाने मूळ आकार बदलला आहे. विकसक साधनांमध्ये मूळ घटकाचा गणलेला फॉन्ट आकार पाहा.

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

नाही. rem मूळ घटकाचा संदर्भ घेते आणि em घटकाचाच.

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

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

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

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

rem स्टाइलशीट वाचायला सोपी करणाऱ्या सवयी

पिक्सेल मूल्य टिप्पणीत लिहा

gap: 1.5rem; /* 24px */ सारखी ओळ काही अक्षरे घेते आणि पुढच्या वाचकाला एक रूपांतरण वाचवते. ती तुम्ही कोणता पाया गृहीत धरला हेही नोंदवते.

लहान प्रमाण वापरा

0.5, 1, 1.5, 2 आणि 3 सारखी फक्त मूठभर rem मूल्ये वापरणारा प्रकल्प शिकायला सोपा असतो: एका दिवसानंतर तुम्ही ती विचार न करता पिक्सेलमध्ये जाणता. अशा स्टाइलशीटसाठी तुम्ही rem ला px मध्ये रूपांतरित करता तेव्हा तुम्ही फक्त तुम्हाला आठवते त्याची खात्री करत असता.

तुमच्या मूल्यांना नावे द्या

--space-md: 1.5rem सारख्या कस्टम गुणधर्मांसह स्टाइलशीट आकड्यांऐवजी हेतू वर्णन करते. नाव अर्थ वाहते, आणि संख्या एकाच ठिकाणी बसते.

वेगळ्या डिफॉल्ट आकारासह चाचणी करा

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

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

केवळ संख्या नव्हे, गुणोत्तरांची तुलना करा

तुम्ही संपूर्ण स्टाइलशीटसाठी rem ला px मध्ये रूपांतरित करता तेव्हा आकारांसोबत त्यांच्यातील गुणोत्तरेही पाहा. प्रत्येक पायरी मागच्याच्या सुमारे 1.25 पट असलेले अक्षर प्रमाण 16, 20, 25, 31 आणि 39 पिक्सेल देते; 1.5 चे प्रमाण 16, 24, 36 आणि 54 देते. गुणोत्तर ओळखल्याने डिझायनरचा हेतू कळतो, आणि तुम्हाला नवा आकार हवा असेल तेव्हा प्रमाण सुसंगतपणे वाढवता येते.

पिक्सेलमध्ये विचार करणाऱ्या लोकांसाठी भाषांतर करा

गटातील प्रत्येकजण rem वाचत नाही. प्रकल्प व्यवस्थापक, मजकूर लेखक आणि ग्राहक अनेकदा स्क्रीनशॉटवरून काम करतात आणि शीर्षक थोडे मोठे करायला सांगतात. शीर्षक आता 36 px आहे आणि 2.5 rem वर 40 px असेल असे तुम्ही सांगू शकलात, तर संभाषण छोटे होते. दोन शब्दसंग्रहांमधील झटपट पूल म्हणून पान उपयुक्त आहे.

स्पर्श लक्ष्ये आणि किमान आकार तपासा

स्पर्श स्क्रीनची मार्गदर्शक तत्त्वे किमान सुमारे 44 px च्या लक्ष्यांची मागणी करतात, आणि मजकुराची मार्गदर्शक तत्त्वे सुमारे 16 px किंवा जास्त मुख्य मजकूर मागतात. दोन्ही पिक्सेलमध्ये सांगितलेली आहेत. rem मध्ये लिहिलेली स्टाइलशीट त्यांच्याशी तपासायला, rem ला px मध्ये रूपांतरित करा आणि बटणे आणि मजकूर रेषा ओलांडतात का ते पाहा.

झूम केलेल्या बाबतीत काळजी घ्या

तुम्हाला मिळणारे मूल्य तुम्ही टाइप केलेल्या पायासाठी आहे. तुमचे वाचक मजकूर मोठा करू शकत असतील, तर 20 किंवा 24 च्या पायासह रूपांतरण पुन्हा करून पाहा आणि मांडणी स्क्रीनकडून काय मागते ते पाहा. 16 वर आरामदायी असलेले कार्ड 24 वर ओसंडू शकते, आणि ते शोधण्याची सर्वोत्तम वेळ पान प्रकाशित होण्यापूर्वी असते.

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

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

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

समजा तुम्ही पुल रिक्वेस्टचा आढावा घेत आहात आणि स्टाइलशीटमध्ये padding: 5rem 1.5rem, 3.5rem चे शीर्षक आणि 1.25rem चा प्रस्तावना परिच्छेद असलेला मुख्य विभाग आहे. रचना फाइल पॅडिंग 80 px आणि 24 px, शीर्षक 56 px आणि प्रस्तावना 20 px म्हणते. तुम्ही 5 टाइप करून 80 px वाचता, 1.5 टाइप करून 24 वाचता, 3.5 टाइप करून 56 वाचता, 1.25 टाइप करून 20 वाचता. चारही जुळतात, म्हणून बांधणी विश्वासू आहे. शीर्षक 3.25 rem असते, तर तुम्ही 52 वाचले असते आणि तो फरक डिझायनरपर्यंत पोहोचण्यापूर्वी हेरला असता.

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

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

पाया शोधा: स्टाइलशीटमधील मूळ नियम, किंवा विकसक साधनांमधील गणलेला आकार.

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

rem मूल्य टाइप करा, निकालाशेजारी दाखवलेला पाया तपासा आणि पिक्सेल आकडा नोंदवा.

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

रचना फाइलशी तुलना करा. संख्या भिन्न असतील, तर कोडवर संशय घेण्यापूर्वी पाया तपासा.

सामान्य चुका

न तपासता 16 वापरणे

तो डिफॉल्ट आहे, नियम नाही. मूळ तपासा.

पिक्सेलना अंतिम समजणे

उत्तर एका पायासाठी लागू आहे. मोठा डिफॉल्ट असलेल्या वाचकाला मोठे पिक्सेल दिसतात.

rem आणि em मिसळणे

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

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

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

सारांश

इथे rem ला px मध्ये रूपांतरित करण्यासाठी rem मधील आकार टाइप करा आणि px = rem × पाया हे सूत्र वापरून पिक्सेलमध्ये लगेच वाचा. पाया 16 px पासून सुरू होतो, ब्राउझरचा डिफॉल्ट, आणि तुम्ही तो तुमच्या CSS शी जुळवण्यासाठी बदलू शकता. रूपांतरण प्रमाण राखते, कारण एक rem म्हणजे मूळ फॉन्ट आकार जो काही असेल तो, आणि ते तुमच्या वाचकाची सेटिंग जाणू शकत नाही, म्हणून आकडा फक्त रकान्यातील पायासाठी बरोबर आहे. 8 px वरील 0.5 rem पासून 64 px वरील 4 rem पर्यंतच्या सामान्य मूल्यांचा तक्ता तुम्हाला स्टाइलशीट एका दृष्टिक्षेपात वाचायला मदत करतो. काहीही अपलोड होत नाही.