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

डिझायनर आणि विकसक px ला rem मध्ये का रूपांतरित करतात

डिझाइन साधने पिक्सेलमध्ये बोलतात. मॉकअप सांगतो की शीर्षक 32 px आहे, विभागांमधील अंतर 48 px आहे, बटणाला 16 px पॅडिंग आहे. नीट लिहिलेल्या स्टाइलशीट rem मध्ये बोलतात. त्या दोन भाषांमधील दरी म्हणजे हे पान: तुम्ही पिक्सेलमध्ये आकार टाइप करता आणि rem मध्ये वाचता, म्हणजे तुम्ही CSS मध्ये टाकलेल्या संख्येचा अर्थ डिझायनरला जो हवा होता तोच असतो. px ला rem मध्ये रूपांतरित करणे ही छोटी कृती आहे, पण संकेतस्थळाच्या आयुष्यात ती शेकडो वेळा केली जाते, आणि चुकीचा पाया काळजीपूर्वक केलेली मांडणी सर्वत्र एकाच वेळी थोडी चुकीची करतो.

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

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

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

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

सूत्र एक भागाकार आहे: rem = px ÷ पाया. 16 px च्या नेहमीच्या पायासह 24 px चा आकार 1.5 rem बनतो, 32 px चा 2 rem आणि 8 px चा 0.5 rem. पान तुम्ही टाइप करता तेव्हा निकाल दाखवते, आणि ते वापरलेला पाया दाखवते, म्हणून 24 px = 1.5 rem (16 px) ही ओळ तुम्हाला नेमके काय गृहीत धरले ते सांगते.

16 कुठून येते

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

62.5% युक्ती आणि लोक ती का वापरतात

काही स्टाइलशीट मूळ आकार 62.5% वर ठेवतात, ज्यामुळे डिफॉल्ट ब्राउझरवर 1 rem बरोबर 10 px होते, म्हणजे 24 px हे साधे 2.4 rem आणि गणित मनातल्या मनात करणे सोपे. ते चालते, पण त्याला किंमत आहे: संपूर्ण पान आता त्या टक्केवारीवर अवलंबून असते, आणि पाया म्हणून 16 अपेक्षित असलेला कोणताही घटक खूप लहान निघेल. तुमचा प्रकल्प हे करत असेल, तर या पानाच्या पाया रकान्यात 10 टाइप करा, आणि प्रत्येक आकडा तुमच्या CSS शी जुळेल.

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

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

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

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

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

पूर्णांकन

16 ने भागणे अनेक सामान्य आकारांसाठी (16, 24, 32, 48, 64) स्वच्छ निकाल देते आणि इतरांसाठी आवर्ती दशांश (10 px म्हणजे 0.625 rem; 13 px म्हणजे 0.8125). संख्येला जितके अंक हवेत तितके पान देते, आणि स्टाइलशीटमध्ये किती ठेवायचे ते तुम्ही ठरवता. ब्राउझर लांब दशांश अडचणीशिवाय हाताळतात, पण 0.8125rem सारखे पूर्णांकित मूल्य दहा अंकांच्या मूल्यापेक्षा वाचायला आणि सांभाळायला सोपे असते.

सामान्य आकार

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

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

rem वर बांधलेले प्रमाण

rem मूल्यांचा लहान संच निवडून तो पुन्हा वापरणे ही उपयुक्त सवय आहे: अंतरासाठी 0.5, 1, 1.5, 2, 3 आणि 4, आणि अक्षरांसाठी 0.875, 1, 1.25, 1.5, 2. डिझायनर याला प्रमाण म्हणतात, आणि ते संकेतस्थळाला दृश्यदृष्ट्या सुसंगत ठेवते. मॉकअप तुम्हाला 22 px सारखे विषम मूल्य देतो तेव्हा ते 1.375 rem आहे हे पाहायला रूपांतरक वापरा, आणि मग तुमच्या प्रमाणातील जवळच्या मूल्यापर्यंत पूर्णांकित करायचे का ते ठरवा.

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

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

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

पाया तपासा

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

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

आकडा वाचा आणि तुमच्या CSS मध्ये त्यामागे एकक लिहून वापरा: font-size: 1.5rem. एकक विसरू नका, कारण बहुतेक गुणधर्मांत बिनएककाच्या संख्येचा अर्थ वेगळा असतो.

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

CSS पिक्सेल म्हणजे तुमच्या स्क्रीनचा पिक्सेल नाही

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

rem का आहे

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

व्यवहारात rem कुठे भेटते

अक्षरे

मुख्य मजकूर सामान्यतः 1 rem असतो, शीर्षके 1.25 ते 3 rem, बारीक छपाई 0.75 ते 0.875 rem. त्यांना rem मध्ये लिहिल्याने वाचकाला एक ब्राउझर सेटिंग बदलून संपूर्ण पान मोठे करता येते.

अंतर आणि मांडणी

rem मधील समास, पॅडिंग आणि अंतर रिकामी जागा अक्षरांच्या प्रमाणात ठेवतात. मजकूर वाढतो तेव्हा त्याच्याभोवतीची जागाही वाढते, आणि जुन्या चौकटींत मोठी अक्षरे कोंबण्याऐवजी मांडणी संतुलित राहते.

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

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

पिक्सेलमध्ये काय ठेवावे

केसासारख्या बारीक किनारी, सावल्या आणि पातळ चिन्हे अनेकदा निश्चित पिक्सेल आकारांत सर्वोत्तम दिसतात, कारण मोठ्या मजकुरासह 0.1rem पर्यंत वाढणारी 0.0625rem ची किनार कोणालाही मदत करत नाही. जे मोठे-लहान व्हायला हवे त्यासाठी rem आणि जे नको त्यासाठी पिक्सेल वापरा.

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

पाया नेहमी 16 नसतो हे विसरणे

प्रकल्प html { font-size: 62.5% } ठरवतो, किंवा द्रवरूप मूळ आकार वापरतो, तर गुणक वेगळा असतो. कोणत्याही रूपांतरकाकडून, या पानासह, आलेल्या संख्येवर विश्वास ठेवण्यापूर्वी स्टाइलशीट तपासा.

मूळ आकारालाच रूपांतरित करणे

मूळ आकार पिक्सेलमध्ये ठरवला, तर वाचकाची ब्राउझर सेटिंग ओव्हरराइड होते आणि rem चा फायदा जातो. मूळ टक्केवारीत ठरवा, किंवा त्याला हात लावू नका, म्हणजे वापरकर्त्याच्या पसंतीचा आदर राखला जातो.

स्वतःचा फॉन्ट आकार ठरवणाऱ्या घटकात rem वापरणे

rem नेहमी मुळाचा संदर्भ घेते, घटकाचा नाही. 14 px फॉन्ट आकार आणि 1rem पॅडिंग असलेल्या बटणाचे पॅडिंग बटणाच्या स्वतःच्या मजकुराला अनुसरत नाही. घटकाच्या मजकुराला अनुसरणारी जागा हवी असेल, तर ते em चे काम आहे.

योजनेशिवाय एकके मिसळणे

एका समासासाठी px, पुढच्यासाठी rem आणि तिसऱ्यासाठी em वापरणारी स्टाइलशीट तर्क करायला कठीण असते. नियम निवडा: अक्षरे आणि अंतरासाठी rem, किनारी आणि सावल्यांसाठी पिक्सेल, आणि त्याला धरून राहा.

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

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

एक, डिफॉल्ट ब्राउझरवर. सोळा भागिले सोळाचा पाया.

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

अक्षरे आणि अंतरासाठी, बहुतेक प्रकल्पांत ही चांगली निवड आहे, कारण ती वाचकाच्या सेटिंगचा आदर करते. जे मोठे-लहान होऊ नये अशा गोष्टींसाठी पिक्सेल योग्य राहतात.

माझा निकाल दुसऱ्या संकेतस्थळापेक्षा वेगळा का आहे?

बहुधा वेगळा पाया. रकाना तपासा: काही साधने 10 गृहीत धरतात, काही 16, काही 14. हे पान निकालाशेजारी पाया दाखवते.

मला पूर्णांकन करावे लागते का?

नाही. ब्राउझर लांब दशांश स्वीकारतात. फक्त वाचनीयतेसाठी पूर्णांकित करा.

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

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

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

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

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

प्रकल्पासाठी पाया ठरवा आणि त्याला धरून राहा

तुम्ही जे निवडाल ते निर्णय बनवा आणि प्रकल्पाच्या दस्तऐवजीकरणात लिहा. पायाबद्दल असहमत असलेला गट एकमेकांना न बसणारे घटक निर्माण करतो.

रचनेच्या टप्प्यावर रूपांतरित करा, शेवटच्या क्षणी नाही

मॉकअप वाचताना तुम्ही px ला rem मध्ये रूपांतरित केले, तर तुम्ही प्रमाण रचनेत बांधता आणि विषम मूल्ये लवकर लक्षात येतात. शेवटी केले, तर ती तुम्हाला विसंगत संख्यांचा ढीग म्हणून सापडतात.

व्ह्यूपोर्ट एककांचाही विचार करा

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

px ला rem मध्ये रूपांतरित करणे सोपे करणाऱ्या सवयी

रूपांतरण तक्ता मनात ठेवा

16 च्या पायासह काही आधार बहुतेक काम भागवतात: 4 px म्हणजे 0.25 rem, 8 px म्हणजे 0.5, 12 px म्हणजे 0.75, 16 px म्हणजे 1, 24 px म्हणजे 1.5 आणि 32 px म्हणजे 2. मॉकअप तुम्हाला त्यांच्यामधील मूल्य देतो तेव्हा तुम्ही पानावर px ला rem मध्ये रूपांतरित करण्यापूर्वी अंदाज करू शकता, आणि रूपांतरक फक्त खात्रीसाठी वापरू शकता. काही आठवड्यांनी तुम्ही न पाहता तक्ता जाणाल.

रचना प्रणालीला काम करू द्या

तुमचा गट spacing-2 किंवा font-lg सारखी डिझाइन टोकन ठेवत असेल, तर ती एकदा rem मध्ये साठवा, आणि सर्वांना नावांचा संदर्भ घेऊ द्या. मग कोणालाही पुन्हा px ला rem मध्ये रूपांतरित करावे लागत नाही, आणि प्रमाणातील बदल एकाच ठिकाणी केला जातो. तुम्ही टोकन लिहिताना रूपांतरक वापरता, ती वापरताना नाही.

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

padding: 1.25rem; /* 20px */ सारखी ओळ काही अक्षरे घेते आणि पुढच्या विकसकाला कॅल्क्युलेटर उचलण्यापासून वाचवते. ती तुम्ही कोणता पाया गृहीत धरला हेही नोंदवते, जे मूळ आकार नंतर बदलला तर मदत करते.

बदललेल्या ब्राउझर सेटिंगसह चाचणी करा

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

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

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

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

समजा मॉकअप कार्ड शीर्षक 28 px, कार्ड पॅडिंग 20 px आणि कार्डांमधील अंतर 12 px देतो, आणि तुमचा प्रकल्प डिफॉल्ट 16 px पाया वापरतो. तुम्ही 28 टाइप करून 1.75 rem वाचता, 20 टाइप करून 1.25 rem वाचता, 12 टाइप करून 0.75 rem वाचता. स्टाइलशीटमध्ये तुम्ही font-size: 1.75rem, padding: 1.25rem आणि gap: 0.75rem लिहिता. ब्राउझर मजकूर आकार 20 px पर्यंत वाढवणारा अभ्यागत तेच कार्ड पाव भाग मोठे झालेले पाहतो: शीर्षक 35 px, पॅडिंग 25 px आणि अंतर 15 px, सर्व प्रमाणात. तुम्ही पिक्सेल लिहिले असते, तर शीर्षक 28 वरच राहिले असते आणि कार्ड चुकीचे दिसले असते.

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

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

तुमचा CSS वापरत असलेला पाया शोधा. कोणते आकार मोठे-लहान व्हावेत आणि कोणते नाही ते ठरवा.

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

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

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

ब्राउझरमध्ये मोठा डिफॉल्ट मजकूर आकार ठेवून पानाची चाचणी घ्या, आणि आपला मजकूर आता न मावणाऱ्या चौकटी शोधा.

सामान्य चुका

1 rem नेहमी 16 px असते असे गृहीत धरणे

मूळ आकार कोणी बदलला नसेल तेव्हाच ते असते, आणि काही वाचकांनी बदलला आहे. मांडणी अशी लिहा की ती इतर आकारांतही चालते.

मूळ आकार पिक्सेलमध्ये ठरवणे

ते वाचकाची निवड ओव्हरराइड करते. टक्केवारी वापरा, किंवा ठरवू नका.

सर्व काही रूपांतरित करणे

प्रत्येक आकार मोठा-लहान व्हायला नको. किनारी आणि सावल्या पिक्सेलमध्ये ठेवा.

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

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

सारांश

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