px चे vw मध्ये रूपांतर Pixels ↔ Viewport width मोफत ऑनलाइन सुरक्षित
px मध्ये एक मूल्य लिहा आणि तिथेच ते vw मध्ये वाचा. हिशेब तुमच्या ब्राउझरमध्ये होतो, कुठेही काही पाठवले जात नाही, आणि उत्तर कशावर अवलंबून आहे ते गृहीत धरले जात नाही — खाली लिहिले आहे.
काहीही अपलोड होत नाही
नेहमीचे आकार — px चे vw मध्ये रूपांतर
| px | vw |
|---|---|
| 8 | 0.555556 |
| 10 | 0.694444 |
| 12 | 0.833333 |
| 14 | 0.972222 |
| 16 | 1.111111 |
| 18 | 1.25 |
| 20 | 1.388889 |
| 24 | 1.666667 |
| 32 | 2.222222 |
| 48 | 3.333333 |
| 64 | 4.444444 |
ही एकके कुठून आली
CSS मधला पिक्सेल तुमच्या पडद्यावरचा पिक्सेल नव्हे. पडद्यांची घनता अंदाज बांधण्यासारखी राहिली नाही, तेव्हा खऱ्या पिक्सेलांत मोजलेले पान असे पान झाले जे पडदे जितके बारीक तितके आकसत जाई; म्हणून CSS पिक्सेल एक संदर्भ लांबी म्हणून नव्याने ठरवला गेला: सोयीस्कर वाचन-अंतरावरून पाहिलेला, इंचाचा सुमारे शहाण्णववा भाग. या पानावरचे बाकी सगळे त्यावरच उभे आहे. em हा वेबहून जुना आहे — शिशाच्या अक्षरांत तो ओतलेल्या ठोकळ्याची रुंदी होता, नाव मोठ्या M वरून — आणि CSS मध्ये त्याचा अर्थ चालू अक्षरांचा आकार, म्हणूनच घटक एकमेकांत ठेवल्यावर तो बदलतो. rem नेमके त्यातून सुटण्यासाठीच जोडले गेले: तो मूळ घटकाचा em आहे आणि कधीच साचत नाही. vw प्रतिसादी रचनेबरोबर आला: दृश्यक्षेत्राच्या रुंदीचा शंभरावा भाग, ती रुंदी कितीही निघो.
ती तुम्हाला कुठे भेटतात
ही प्रत्येक शैलीपत्रिकेची एकके आहेत. पिक्सेल कडा, सावल्या आणि जे वाढू नये अशा प्रत्येक गोष्टीचा आकार ठरवतात; rem अक्षर, अंतर आणि मांडणीचा आकार ठरवतो, त्यामुळे मुळाशी एकच बदल अख्ख्या आंतरपृष्ठाचा आकार बदलतो; em अशा गोष्टींचा आकार ठरवतो ज्या आपल्याच मजकुराच्या मागे जाव्यात, जसे बटणाच्या आतली जागा; vw अशा शीर्षकांचा व सुरुवातीच्या पट्ट्यांचा जे कोणत्याही उपकरणावर पडदा भरून टाकतील. यांच्यातले रूपांतर हेच ते रोजचे गणित, ज्याने पिक्सेलांत दिलेली रचना वाढणारी-आकसणारी शैलीपत्रिका बनते.
वारंवार विचारले जाणारे प्रश्न
१६ px हाच नेहमीचा प्रारंभबिंदू का?
कारण प्रत्येक मोठ्या ब्राउझरमध्ये मजकुराचा पूर्वनिर्धारित आकार तोच आहे, आणि जी शैलीपत्रिका तो बदलत नाही तिला तो वारशाने मिळतो. म्हणून पूर्वनिर्धारित मांडणीत एक rem म्हणजे १६ px, आणि ओळखीची रूपांतरे तिथूनच येतात: ०.५ rem म्हणजे ८ px, १.५ rem म्हणजे २४ px. वापरणाऱ्याने ब्राउझरच्या मांडणीत तो पूर्वनिर्धारित आकार मोठा केला असेल, तर तीच rem ची मूल्ये त्याच्यासोबत वाढतात — आणि ती वापरण्याचा हेतू नेमका तोच आहे.
rem वापरू की em?
जे पूर्ण पानाच्या मागे जायला हवे त्यासाठी rem — अक्षरांची शिडी, अंतरे, मांडणीच्या रुंद्या — कारण तो मुळापासून मोजला जातो आणि कधीच साचत नाही. जे आपल्या मजकुराच्या मागे जायला हवे त्यासाठी em: बटणाची आतली जागा, चिन्हाशेजारची फट, अवतरणाची मागे-सरक. नेहमीची चूक म्हणजे em मध्ये मोजलेले घटक एकमेकांत ठेवणे: १.२ em मधला १.२ em होतो १.४४, मग १.७३, आणि पानाच्या तळाचा मजकूर ठरवलेल्या आकाराच्या दुप्पट होऊन बसतो.
उत्तर अचूक आहे का?
जिथे दोन्ही एकके एकमेकांतून पूर्णांकांनी व्याख्यायित आहेत तिथे होय — पान हे आकड्याच्या वर सांगते, आणि एकमेव गोलाई किती अंक दाखवायचे यात आहे. जिथे गुणोत्तराचा दशांश संपत नाही, तिथे पान बारा सार्थ अंक दाखवते आणि संबंध अंदाजे आहे असे सांगते, वेगळे काही भासवत नाही.
मी लिहिलेले माझ्या उपकरणातून बाहेर जाते का?
नाही. गणित तुमच्याच ब्राउझरमध्ये होते; काहीही अपलोड होत नाही, आणि होण्यासाठी सर्व्हरही नाही. पान एकदा उघडले की नेटवर्क बंद असतानाही चालते.
तुम्ही px ला vw मध्ये रूपांतरित का करता
डिझायनर 1440 px रुंदीवर काढलेला मॉकअप पाठवतो, ज्यात 96 px चे मुख्य शीर्षक आणि 72 px चे विभाग अंतर आहे. खऱ्या वेबवर पान फोनवर 360 px, टॅबलेटवर 820 px आणि मोठ्या मॉनिटरवर 2560 px वर पाहिले जाईल, आणि डिझायनरला प्रत्येकावर शीर्षकाने स्क्रीनशी आपले प्रमाण राखावे असे वाटते. त्यासाठी बनलेले एकक म्हणजे व्ह्यूपोर्ट रुंदी, vw, आणि मॉकअपमधून तिथे पोहोचण्याचा मार्ग म्हणजे px ला vw मध्ये रूपांतरित करणे: तुम्ही पिक्सेल मूल्य घेता, ते रचना ज्या रुंदीवर काढली त्याने भागता आणि शंभराने गुणता. 1440 px कॅनव्हासवरील 96 px शीर्षक 6.67 vw आहे, आणि तेव्हापासून ते स्क्रीन कितीही असली तरी तिच्या 6.67 टक्के असते.
हेच व्ह्यूपोर्ट एककाचे वचन आहे, आणि त्याचा धोकाही. rem आणि em फॉन्ट आकारापासून सुरू होतात, जो ब्राउझर योग्य डिफॉल्टवर ठेवतो. vw ला अजिबात डिफॉल्ट नाही: व्ह्यूपोर्ट रुंदी म्हणजे वाचकाची विंडो जितकी रुंद असेल तितकी, आणि फोन फिरवला किंवा विंडो ओढली की ती बदलते. म्हणून रूपांतरक उत्तर ज्यावर अवलंबून असते ती एक संख्या लपवत नाही. रचनेची रुंदी रकान्यात आहे, 1440 px पासून सुरू होणारी, आणि तुम्ही ती तुमच्या मॉकअपशी जुळवण्यासाठी बदलू शकता.
गणित तुमच्या ब्राउझरमध्ये चालते आणि काहीही अपलोड होत नाही. खाली तुम्हाला सूत्र, रूपांतरण काय राखते आणि काय राखू शकत नाही, व्ह्यूपोर्ट एकके कुठे मदत करतात आणि कुठे इजा करतात, शुद्ध vw मजकूर निर्माण करणारी सुलभता समस्या, ती दुरुस्त करणारे clamp तंत्र आणि पिक्सेल मॉकअपला द्रवरूप स्टाइलशीटमध्ये बदलण्याची पद्धत सापडेल.
सूत्र आणि रुंदी
vw म्हणजे px भागिले रुंदी, गुणिले शंभर
सूत्र आहे vw = px ÷ रुंदी × 100. 1440 px च्या रचना रुंदीसह 144 px चा आकार 10 vw बनतो, 72 px चा 5 vw आणि 24 px चा 1.667 vw. पान निकालाशेजारी रुंदी दाखवते, जसे 144 px = 10 vw (1440 px), म्हणजे काय गृहीत धरले गेले ते तुम्हाला दिसते. एक vw म्हणजे व्ह्यूपोर्ट रुंदीचा शंभरावा भाग, म्हणून 1000 px रुंद विंडोत 1 vw बरोबर 10 px.
1440 कुठून येते
इथले 1440 px ही अशी रुंदी आहे ज्यावर रचना अनेकदा काढल्या जातात, सवय आणि मानक नाही. काही गट 1280 वर काढतात, अनेक 1920 वर, आणि मोबाइल रचना 375 किंवा 390 वर. योग्य उत्तर नाही, फक्त तुमची रचना फाइल वापरते ती रुंदी. तुमची स्वतःची टाइप करा: रूपांतरण तुम्ही दिलेल्या रुंदीइतकेच चांगले असते.
रचनेची स्वतःची रुंदी वापरणे
मॉकअप 1920 px वर काढला असेल, तर 1920 टाइप करा, आणि तेच 96 px शीर्षक 5 vw बनते. चुकीची रुंदी वापरून px ला vw मध्ये रूपांतरित केले, तर पान एका स्क्रीन आकारावर बरोबर दिसेल आणि इतर सर्वांवर चुकीचे, जो तुम्हाला शोधायचे माहीत नसते तेव्हा गोंधळात टाकणारा दोष असतो.
रूपांतरण काय राखते आणि काय नाही
ते स्क्रीनचा वाटा राखते
एक vw म्हणजे व्ह्यूपोर्ट रुंदीचा शंभरावा भाग, म्हणून vw मध्ये लिहिलेला आकार जागीच राहण्याऐवजी विंडोसोबत वाढतो आणि कमी होतो. निकाल म्हणजे तुमच्या मॉकअपमध्ये पिक्सेल मूल्याने व्यापलेला स्क्रीनचा वाटा, आणि ब्राउझरमध्ये घटक प्रत्येक रुंदीवर तो वाटा राखतो.
ते डिफॉल्ट देऊ शकत नाही
rem च्या विपरीत vw ला डिफॉल्ट नाही. कोणी सांगत नाही तेव्हा ब्राउझर मूळ फॉन्ट आकार 16 px देतो, म्हणून rem पान खऱ्या संख्येपासून सुरू होऊ शकते; व्ह्यूपोर्ट रुंदी म्हणजे वाचकाची विंडो जितकी रुंद असेल तितकी, आणि फोन फिरवला की ती बदलते. रकान्यातील रुंदी तुमच्या रचनेची रुंदी आहे, आणि उत्तर त्या रुंदीच्या स्क्रीनसाठी बरोबर आहे आणि इतरत्र प्रमाणात.
पूर्णांकन
1440 ने भागल्याने बहुतेक आकारांसाठी लांब दशांश तयार होतात. 6.6667 vw सारखे मूल्य स्टाइलशीटमध्ये चालते, पण दृश्य बदलाशिवाय तुम्ही 6.67 किंवा 6.7 पर्यंत पूर्णांकित करू शकता. बिंदूनंतर दोन-तीन अंक ठेवा; जास्त म्हणजे गोंगाट.
व्ह्यूपोर्ट एकके कुठे मदत करतात
मुख्य शीर्षके आणि मोठी प्रदर्शन अक्षरे
प्रत्येक उपकरणावर स्क्रीनचा ठराविक वाटा भरायला हवे असलेले शीर्षक हा अभिजात वापर आहे. फोनच्या रुंदीवर निश्चित 96 px शीर्षक ओसंडले असते; vw मध्ये ते स्क्रीनसोबत आकुंचन पावते आणि एका ओळीत राहते.
पूर्ण-रुंदीचे विभाग
लँडिंग पानाच्या मोठ्या विभागांमधील अंतर अनेकदा स्क्रीनसोबत मोठे-लहान होते तेव्हा सर्वोत्तम दिसते, म्हणजे पान लहान लॅपटॉपवर आणि रुंद प्रदर्शनावर आपली लय राखते. vw मधील अंतर ते करते.
आकार राखायला हवी अशी कलाकृती
vw मध्ये आकार दिलेल्या मुख्य प्रतिमा, चित्रे आणि सजावटी आकार विंडोशी आपले प्रमाण राखतात, म्हणून स्क्रीन बदलताना रचना विस्कटत नाही.
मर्यादांसह द्रवरूप अक्षरे
clamp() सोबत जोडल्यावर vw किमान आणि कमाल दरम्यान सुरळीत वाढणारी अक्षरे देते. आधुनिक स्टाइलशीट शीर्षकांसाठी हेच तंत्र वापरतात, आणि ते खाली समाविष्ट आहे.
व्ह्यूपोर्ट एकके कुठे इजा करतात
शुद्ध vw मधील मुख्य मजकूर
फक्त vw मध्ये आकार दिलेला मजकूर वाचकाने ब्राउझरमध्ये पान झूम केले तरी प्रतिसाद देत नाही, कारण झूम विंडोचा पिक्सेल आकार बदलतो पण vw आकार तिचा वाटा राखतो. झूमवर अवलंबून असलेले लोक, अनेकदा कमी दृष्टीमुळे, मोठा करता न येणाऱ्या मजकुराशी उरतात. सुलभता मार्गदर्शक तत्त्वे मजकुराचा आकार बदलता यावा असे मागतात, आणि शुद्ध vw आकार ती चाचणी चुकवतो.
अतिशय लहान आणि प्रचंड टोके
320 px रुंदीवर 6.67 vw चे शीर्षक 21 px आहे, जे खूप लहान असू शकते. 2560 px रुंदीवर ते 171 px आहे, जे प्रचंड आहे. मर्यादांशिवाय, 1440 वर बरोबर दिसणारे प्रमाण टोकांवर अतार्किक असू शकते.
स्क्रोलबार
डेस्कटॉप ब्राउझरमध्ये vw साठी वापरली जाणारी व्ह्यूपोर्ट रुंदी उभ्या स्क्रोलबारची रुंदी समाविष्ट करते. त्यामुळे 100vw सेट केलेली पेटी पान स्क्रोल होते तेव्हा दिसणाऱ्या क्षेत्रापेक्षा थोडी रुंद असेल, आणि आडवा स्क्रोलबार दिसू शकतो. vw ने पूर्ण-रुंदीची मांडणी बांधण्यापूर्वी हे जाणा.
clamp तंत्र
किमान आणि कमाल ठरवणे
CSS फंक्शन clamp(min, preferred, max) किमान, पसंतीचे मूल्य आणि कमाल घेते. अक्षरांसाठी किमान आणि कमाल rem मध्ये लिहा, आणि पसंतीचे मूल्य vw अधिक rem पदात: font-size: clamp(2rem, 1rem + 4vw, 6rem). आकार विंडोसोबत 32 आणि 96 px दरम्यान वाढतो आणि कोणत्याही टोकाच्या पलीकडे जात नाही. त्याचा एक भाग rem मध्ये असल्याने मजकूर अजूनही वाचकाच्या सेटिंगचा आदर करतो.
मधले पद कसे बांधावे
दोन स्क्रीन रुंदी आणि प्रत्येकावर हवे असलेले आकार निवडा. उदाहरणार्थ 360 px रुंदीवर 32 px आणि 1440 px रुंदीवर 96 px. उतार (96 − 32) ÷ (1440 − 360) = 0.0593 px प्रति रुंदीचा px आहे, जे 5.93 vw आहे, आणि छेद 32 − 0.0593 × 360 = 10.67 px आहे, सुमारे 0.667 rem. त्यामुळे पसंतीचे पद 0.667rem + 5.93vw आहे. रूपांतरक vw भागासाठी मदत करतो, आणि एका मिनिटाचे गणित बाकीचे करते.
हा योग्य समतोल का आहे
clamp सह तुम्हाला डिझायनरना हवी असलेली द्रवरूप वागणूक आणि वाचकांना लागणारी सुलभता मिळते. वर वर्णन केलेल्या त्रासाचे हे उत्तर आहे, आणि बहुतेक आधुनिक स्टाइलशीट vw फक्त clamp च्या आत वापरतात याचे कारणही.
इथे px ला vw मध्ये रूपांतरित कसे करावे
पिक्सेल मूल्य टाइप करा
पहिल्या रकान्यात पिक्सेलमधील आकार टाका. दशांश स्वीकारले जातात.
रचनेची रुंदी ठरवा
तुमच्या मॉकअपची रुंदी 1440 असेल तर ती तशी ठेवा. नसेल तर बदला. तुम्ही टाइप करता तसा निकाल अद्ययावत होतो.
vw मूल्य कॉपी करा
आकडा तुमच्या CSS मध्ये एककासह वापरा, जसे font-size: 6.67vw. मजकुरासाठी तो rem मधील मर्यादांसह clamp() च्या आत ठेवा.
ही एकके कुठून येतात
CSS पिक्सेल
प्रदर्शनांना अंदाज करता येईल अशी घनता नसेल तेव्हा खऱ्या पिक्सेलमध्ये मोजलेले पान स्क्रीन अधिक तीक्ष्ण होताना आकुंचन पावणारे पान बनले. म्हणून CSS पिक्सेलची संदर्भ लांबी म्हणून पुनर्व्याख्या केली गेली: सोयीच्या वाचन अंतरावर दिसणाऱ्या इंचाच्या सुमारे 1/96. तुमचा मॉकअप ज्या एककात काढलेला असतो ते हेच.
व्ह्यूपोर्ट एकके
vw प्रतिसादी रचनेसोबत आले: व्ह्यूपोर्टच्या रुंदीचा शंभरावा भाग, ती काहीही निघो. ते rem सोबत बसते, जे मूळ फॉन्ट आकाराशी सापेक्ष आहे, आणि em सोबत, जे घटकाशी सापेक्ष आहे. तुम्हाला स्क्रीनऐवजी मजकुराशी सापेक्ष आकार हवे असतील, तर px ला rem मध्ये रूपांतरित करा.
px ला vw मध्ये रूपांतरित करताना सापळे
चुकीची रचना रुंदी वापरणे
सर्वात सामान्य चूक. तुमचा मॉकअप 1920 रुंद असेल आणि तुम्ही 1440 ने रूपांतरित केले, तर प्रत्येक आकार एक तृतीयांशाने चुकतो. तुमच्या रचना साधनात चौकटीची रुंदी निश्चित करा.
मोबाइल रचना विसरणे
अनेक गटांकडे दोन मॉकअप असतात, एक डेस्कटॉपसाठी आणि एक फोनसाठी. पहिल्यावर 96 px आणि दुसऱ्यावर 40 px असलेले शीर्षक एक vw मूल्य नसते. दोन रुंदी, दोन रूपांतरणे आणि त्यांना जोडायला clamp वापरा.
संपूर्ण पान vw मध्ये ठेवणे
जिथे सर्वकाही विंडोसोबत मोठे-लहान होते त्या पानाची वाचनाची जाण हरवते: रुंद स्क्रीनवर ओळी खूप लांब होतात आणि अरुंद स्क्रीनवर मजकूर खूप लहान. जे थोडेच मोठे-लहान व्हायला हवे त्यासाठी vw वापरा, आणि बाकीसाठी निश्चित किंवा rem आकार.
झूम समस्येकडे दुर्लक्ष करणे
तुमच्या पानाची चाचणी ब्राउझर 200 टक्क्यांवर झूम करून घ्या. मजकूर वाढला नाही, तर आकारांना rem पद लागते.
रूपांतरणापूर्वी लोक विचारत असलेले प्रश्न
100 px म्हणजे किती vw?
1440 px च्या रचना रुंदीवर सुमारे 6.94 vw.
वापरायची सर्वोत्तम रचना रुंदी कोणती?
तुमचा मॉकअप ज्यावर काढला गेला ती. सार्वत्रिक डिफॉल्ट नाही.
vw, rem पेक्षा चांगले आहे का?
ते वेगवेगळी कामे करतात. rem वाचकाच्या मजकूर आकाराला अनुसरते; vw विंडोला. प्रत्येकाचा त्याच्या चांगल्या कामासाठी वापर करा.
मी फॉन्ट आकारासाठी vw वापरू शकतो का?
हो, पण ते rem मधील मर्यादांसह clamp() च्या आत ठेवा, म्हणजे मजकूर वाचनीय राहतो आणि तरीही झूम करता येतो.
माझी संख्या अपलोड होते का?
नाही. गणित तुमच्या ब्राउझरमध्ये चालते आणि काहीही कुठेही पाठवले जात नाही.
मी परत कसे जाऊ?
vw ला px मध्ये रूपांतरित करा सह, जे भागण्याऐवजी रुंदीने गुणते.
px ला vw मध्ये रूपांतरित करताना शहाणपणाने निवडणे
स्क्रीनसोबत काय मोठे-लहान व्हावे ते ठरवा
मुख्य अक्षरे, मोठी अंतरे आणि कलाकृती: हो. मुख्य मजकूर, किनारी, लहान नियंत्रणे: नाही. तुमची vw मूल्यांची यादी जितकी छोटी तितके पान अधिक भक्कम.
रचनेच्या टप्प्यावर रूपांतरित करा
मॉकअप वाचताना तुम्ही px ला vw मध्ये रूपांतरित केले, तर कोणती मूल्ये विषम निघतात ते तुम्हाला लगेच दिसते आणि तुम्ही डिझायनरकडे अधिक नीटनेटकी मागू शकता. 6.6667 vw निघणारे शीर्षक ते 6.5 किंवा 7 करण्याबद्दलच्या चर्चेला आमंत्रण देते.
रुंदीची नोंद ठेवा
स्टाइलशीटच्या शीर्षस्थानी टिप्पणीत रचना रुंदी लिहा, म्हणजे नंतर रूपांतरित करणारा कोणीही तीच वापरेल. मिश्र रुंदी अशा प्रकारे विसंगत पान निर्माण करतात की कोणालाही नीट स्पष्ट करता येत नाही.
मॉकअपपासून द्रवरूप स्टाइलशीटपर्यंत काम
मोठे-लहान व्हायला हवे असलेले आकार यादीत घ्या
रचना फाइल उघडा आणि स्क्रीनला अनुसरायला हवा असलेला प्रत्येक आकार लिहून काढा: मुख्य शीर्षक, विभाग अंतरे, कदाचित मोठे चित्र. प्रत्येकासाठी चौकटीच्या रुंदीशी px ला vw मध्ये रूपांतरित करा, आणि निकाल नोंदवा. बहुतेक पानांवर अशी दहापेक्षा कमी मूल्ये असतात, आणि बाकी सर्व rem किंवा पिक्सेलमध्ये राहते.
मोबाइल चौकट स्वतंत्रपणे तपासा
फोन मॉकअप असेल, तर तीच घटक त्याच्या रुंदीवर वाचा. 1440 px चौकटीवर 96 px आणि 375 px चौकटीवर 40 px चे शीर्षक कोणत्याही एका vw मूल्यात बसत नाही, जे clamp वापरण्याचे संकेत आहे: फोन आकार किमान बनतो, डेस्कटॉप आकार कमाल, आणि vw पद मधले काम करते. तुम्ही प्रत्येक चौकटीसाठी px ला vw मध्ये रूपांतरित करता तेव्हा दोन संख्या उतार ठरवतात.
तीन रुंदींवर आढावा घ्या
तयार पान साधारण 360, 820 आणि 1440 पिक्सेलवर पाहा, आणि एकदा 2560 वर. द्रवरूप मांडण्या मॉकअपच्या रुंदीवर बरोबर करणे सोपे असते आणि इतरत्र सूक्ष्मपणे चुकीच्या, आणि या रुंदींतून लहानसा फेरफटका बहुतेक समस्या अभ्यागताच्या आधी शोधतो.
एकक लांब मजकुरापासून दूर ठेवा
वाचनाच्या मजकुराच्या ओळी rem मध्ये आकार देणे उत्तम, आणि 60 ते 75 अक्षरांची कमाल ओळ लांबी द्यावी. प्रदर्शन अक्षरे आणि अंतरासाठी व्ह्यूपोर्ट एकक वापरा, आणि वाचनाचा मजकूर स्थिर राहू द्या.
संबंधित रूपांतरक
साधनांचे तेच कुटुंब शेजारची रूपांतरणे समाविष्ट करते. पिक्सेलकडे परत जायला vw ते px वापरा. मुळाशी सापेक्ष आकारांसाठी px ते rem आणि rem ते px आहेत, आणि घटकाशी सापेक्ष आकारांसाठी px ते em आणि em ते px. त्याच स्टाइलशीटच्या रंगांसाठी HEX ते RGB आणि HEX ते HSL संकेतने हाताळतात.
एक सोडवलेले उदाहरण
समजा लँडिंग पान 1440 px वर रचले आहे, मुख्य शीर्षक 96 px आणि त्याच्या वर 72 px अंतर. तुम्ही 96 टाइप करून 6.667 vw वाचता, 72 टाइप करून 5 vw वाचता. 1000 px विंडोवर शीर्षक 66.7 px आणि अंतर 50 px आहे, प्रमाणात. पण 360 px रुंद फोनवर शीर्षक 24 px असेल, जे तुम्हाला हवे त्यापेक्षा लहान आहे, म्हणून तुम्ही शीर्षक clamp(2.25rem, 1rem + 5vw, 6rem) असे लिहिता, 36 px किमान आणि 96 px कमाल देऊन, आणि ते वाचनीय आणि झूम करण्याजोगे राहते. मजकूर नसलेले अंतर साध्या vw मध्ये राहते.
एक संक्षिप्त तपासणी यादी
रूपांतरणापूर्वी
मॉकअपची रुंदी शोधा. कोणते आकार मोठे-लहान व्हावेत आणि कोणते नाही ते ठरवा.
रूपांतरण करताना
पिक्सेल मूल्य आणि रचना रुंदी टाइप करा, आणि vw आकडा एककासह कॉपी करा.
रूपांतरणानंतर
फोनच्या रुंदीपासून रुंद मॉनिटरपर्यंत विंडोचा आकार बदला, आणि पान 200 टक्के झूम करा. टोके चुकीची दिसतील तिथे clamp() ने मर्यादा जोडा.
सामान्य चुका
1440 मानक आहे असे गृहीत धरणे
ती फक्त सवय आहे. तुमची स्वतःची रुंदी वापरा.
मुख्य मजकुराचा आकार फक्त vw मध्ये ठरवणे
तो झूम करता येत नाही. rem पद आणि मर्यादा जोडा.
स्क्रोलबार विसरणे
स्क्रोल होणाऱ्या डेस्कटॉप पानांवर 100vw दिसणाऱ्या क्षेत्रापेक्षा रुंद असते.
तुमच्या संख्या तुमच्या उपकरणावरच राहतात
गणना स्थानिक पातळीवर घडते. तुमची मूल्ये तुमचा स्वतःचा ब्राउझर वापरतो आणि काहीही कुठेही पाठवले जात नाही. नंतर हटवायला काही नाही आणि तयार करायला खाते नाही. px ला vw मध्ये रूपांतरित करण्याचा हा साधा मार्ग आहे.
सारांश
इथे px ला vw मध्ये रूपांतरित करण्यासाठी पिक्सेलमधील आकार आणि तुमच्या रचनेची रुंदी टाइप करा, आणि vw = px ÷ रुंदी × 100 हे सूत्र वापरून निकाल लगेच वाचा. रुंदी 1440 px पासून सुरू होते, अशी रुंदी ज्यावर रचना अनेकदा काढल्या जातात, पण ती सवय आहे, मानक नाही, म्हणून तुमची स्वतःची टाइप करा. रूपांतरण स्क्रीनचा वाटा राखते: एक vw म्हणजे व्ह्यूपोर्ट रुंदीचा शंभरावा भाग, म्हणून vw मधील आकार विंडोसोबत वाढतो आणि कमी होतो. rem च्या विपरीत vw ला डिफॉल्ट नाही, कारण व्ह्यूपोर्ट म्हणजे वाचकाची विंडो जितकी रुंद असेल तितकी. मजकुरासाठी vw ला clamp() च्या आत rem सोबत जोडा, म्हणजे तो वाचनीय आणि झूम करण्याजोगा राहतो. काहीही अपलोड होत नाही.