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

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

स्टाइलशीट हीरो शीर्षकावर font-size: 5.2vw, विभागावर margin-top: 8vw आणि चित्रावर width: 42vw म्हणते. ती लवचिक मूल्ये आहेत, आणि पडद्यावर काय आहे ते ती सांगत नाहीत. फोनवर शीर्षक किती मोठे आहे? लॅपटॉपवर चित्र किती रुंद आहे? 1920 पिक्सेलवर समास योग्य दिसतो का? शोधायला तुम्ही vw ला px मध्ये रूपांतरित करता: तुम्ही संख्येला खिडकीच्या रुंदीने गुणता आणि शंभराने भागता, आणि डिझाइनर, चाचणीकार व ग्राहक वापरतात त्या एककात उत्तर वाचता. तुम्ही द्रव कोडचा आढावा घेता, बिल्डची मॉकअपशी तुलना करता किंवा अरुंद पडद्यावर मथळा लहान का दिसतो ते सहकाऱ्याला समजावता तेव्हा तुम्ही हेच करता.

हे रूपांतरण rem किंवा em पेक्षा वेगळे ठरवते ते म्हणजे गुणक खिडकी स्वतःच आहे. एक vw म्हणजे व्ह्यूपोर्ट रुंदीचा शंभरावा भाग, म्हणून 5.2vw म्हणजे 1000 px रुंद खिडकीत 52 px, 360 px रुंद फोनमध्ये 18.7 px आणि 1920 च्या रुंद मॉनिटरवर 99.8 px. आधार घ्यायला कोणतेही डिफॉल्ट नाही, आणि वाचकाने फोन फिरवला किंवा खिडकी ओढली की रुंदी बदलते. रूपांतरक म्हणून रुंदी विचारतो, उत्तराशेजारी दाखवतो आणि 1440 px वर सुरू होतो, ही रुंदी ज्यावर डिझाइन अनेकदा काढली जातात.

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

सूत्र आणि रुंदी

px बरोबर vw गुणिले रुंदी, भागिले शंभर

सूत्र आहे px = vw × width ÷ 100. 1440 px रुंदीवर 10 vw चे 144 px होते, 5 vw चे 72 px आणि 1.667 vw चे 24 px. पान निकालाशेजारी रुंदी छापते, म्हणून 10 vw = 144 px (1440 px) अशी ओळ काय गृहीत धरले होते ते सांगते. दुसरा पडदा पाहायला रुंदी बदला आणि निकाल पुन्हा वाचा.

कोणत्या रुंदी पाहाव्यात

तपासायला उपयुक्त संच म्हणजे फोनसाठी 360 किंवा 390, उभ्या टॅब्लेटसाठी 768, लहान लॅपटॉपसाठी 1024, सामान्य लॅपटॉप किंवा डेस्कटॉपसाठी 1440 आणि पूर्ण-HD मॉनिटरसाठी 1920. प्रत्येक रुंदी रकान्यात टाइप करा आणि निकाल नोंदवा. पाच वाचने तुम्हाला मूल्याची संपूर्ण श्रेणी दाखवतात, आणि कोणताही टोकाचा आकडा उठून दिसतो.

प्रत्यक्ष खिडकीची रुंदी वापरणे

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

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

ते पडद्याचा वाटा राखते

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

ते डिफॉल्ट देऊ शकत नाही

rem च्या उलट vw ला डिफॉल्ट नाही. कोणी वेगळे सांगत नाही तेव्हा ब्राउझर मूळ अक्षर आकार 16 px देतो, म्हणून rem पान खऱ्या आकड्यापासून सुरू होऊ शकते; व्ह्यूपोर्ट रुंदी म्हणजे वाचकाची खिडकी जेवढी रुंद असेल तेवढीच, आणि ते फोन फिरवतात तेव्हा ती बदलते. इथला 1440 px ही रुंदी आहे ज्यावर डिझाइन अनेकदा काढली जातात, सवय आहे, मानक नाही. तुमची स्वतःची टाइप करा.

पूर्णांकन

रुंदीने गुणणे आणि 100 ने भागणे दशांश निर्माण करू शकते. 1440 px वर 6.67 vw म्हणजे 96.048 px. ब्राउझर अपूर्णांक पिक्सेल हाताळतात, पण डिझाइन फाइलसाठी तुम्हाला पूर्ण संख्या हवी असेल, तर पूर्णांकन करा आणि ते तुमचे आहे हे नोंदवा.

द्रव स्टाइलशीट वाचणे

तीन रुंदी घ्या आणि निकाल लिहा

एक अरुंद, एक मधली आणि एक रुंद रुंदी निवडा, उदाहरणार्थ 375, 1024 आणि 1920. स्टाइलशीटमधील प्रत्येक महत्त्वाच्या vw मूल्यासाठी प्रत्येक रुंदीवर vw ला px मध्ये रूपांतरित करा आणि तीन आकडे टिपेत लिहा. 5.2 vw चा मथळा 19.5, 53.2 आणि 99.8 पिक्सेल देतो. असे पाहिल्याने मथळा अरुंद टोकाला वाचनीय आहे आणि रुंद टोकाला दडपून टाकणारा नाही का ते तुम्हाला कळते.

clamp शोधा

चांगला लिहिलेला द्रव कोड vw भोवती clamp(min, preferred, max) ने मर्यादा घालतो. तुम्हाला clamp(2rem, 1rem + 4vw, 6rem) दिसले, तर आकार 32 आणि 96 px दरम्यान वाढतो आणि दोन्ही टोकांना स्थिर राहतो. तुम्ही vw भाग रूपांतरित करता तेव्हा लक्षात ठेवा की तो फक्त श्रेणीचा मधला भाग आहे, आणि कडांवर काय होते ते मर्यादा ठरवतात.

टोके तपासा

धोकादायक रुंदी सर्वात लहान आणि सर्वात मोठी असतात. 320 px वर 6 vw चा मथळा 19 px असतो; 2560 वर तो 154 px असतो. दोन्हीपैकी कोणतेही स्वीकारार्ह दिसत नसेल आणि clamp नसेल, तर स्टाइलशीटला मर्यादा हव्यात.

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

स्क्रोलबार

डेस्कटॉप ब्राउझरवर vw साठी वापरलेल्या व्ह्यूपोर्ट रुंदीत उभ्या स्क्रोलबारची रुंदी समाविष्ट असते. म्हणून पान स्क्रोल होत असताना 100vw दृश्य क्षेत्रापेक्षा थोडे रुंद असते, अनेक प्रणालींवर सुमारे 15 ते 17 पिक्सेलांनी. तुम्ही काढलेले पिक्सेल मूल्य म्हणून ते दर्शवत असल्याचे दिसणाऱ्या दृश्य रुंदीपेक्षा किंचित मोठे असते. फोनवर, जिथे स्क्रोलबार पानावर आच्छादतात, तिथे परिणाम नसतो.

चुकीची रुंदी वापरणे

निकाल तुम्ही टाइप केलेल्या रुंदीइतकाच बरोबर असतो. तुमची चाचणी खिडकी 1366 px रुंद असेल आणि तुम्ही 1440 वर रूपांतरित केले, तर प्रत्येक मूल्य सुमारे पाच टक्क्यांनी चुकते. खरी रुंदी डेव्हलपर साधनांतून वाचा.

vw ची टक्क्याशी गल्लत

50% रुंदी पालकाच्या रुंदीचा संदर्भ देते, तर 50vw खिडकीचा. अरुंद कंटेनरच्या आत दोन्ही खूप वेगळे असतात. रूपांतरक vw उत्तर देतो; तुमचा घटक कंटेनरच्या आत असेल, तर पालक खिडकीपेक्षा अरुंद असू शकतो.

vw मधील मजकूर झूम करता येत नाही हे विसरणे

फक्त vw मध्ये आकार दिलेला मजकूर वाचकाने पान झूम केल्यावर प्रतिसाद देत नाही, कारण खिडकी आणि मजकूर एकत्र मोजले जातात. सुलभता मार्गदर्शक तत्त्वे मजकुराचा आकार बदलता यावा अशी अपेक्षा करतात. clamp() प्रमाणे rem पद जोडा म्हणजे मजकूर झूमलाही प्रतिसाद देईल.

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

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

खिडकीच्या रुंदीचा शंभरावा भाग: 1440 वर 14.4 px, 1000 वर 10 px, 360 वर 3.6 px.

50 vw म्हणजे किती पिक्सेल?

खिडकीचा अर्धा: 1440 रुंदीवर 720 px, 1000 रुंदीवर 500 px.

माझे पान पडद्यापेक्षा रुंद का आहे?

स्क्रोल होणाऱ्या पानावर 100vw चा खोका दृश्य क्षेत्रापेक्षा रुंद असतो कारण स्क्रोलबार मोजला जातो. त्याऐवजी कंटेनरच्या आत 100% वापरा.

vw आणि टक्का सारखेच आहेत का?

नाही. टक्का पालकाचा संदर्भ देतो, vw खिडकीचा.

माझा आकडा अपलोड केला जातो का?

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

मी मागे कसे जाऊ?

px ते vw सह, जे गुणण्याऐवजी रुंदीने भागते.

सामान्य रुंदींवरील सामान्य मूल्ये

मनातला तक्ता

काही आधारबिंदू माहीत असणे उपयुक्त आहे म्हणजे रूपांतरक वापरण्यापूर्वी तुम्ही अंदाज करू शकता. 1000 px रुंदीवर 1 vw म्हणजे 10 px, ज्यामुळे गणित सोपे होते: 2.5 vw म्हणजे 25 px, 8 vw म्हणजे 80 px. 1440 px वर 1 vw म्हणजे 14.4 px. 375 px वर 1 vw म्हणजे 3.75 px, म्हणून 8 vw चा मथळा 30 px. झटपट तपासणीसाठी तुम्ही vw ला px मध्ये रूपांतरित करता तेव्हा यांपैकी एका आधारबिंदूपासून सुरू करा आणि प्रमाणात वाढवा.

तीन रुंदी, एक स्टाइलशीट

80vw रुंदीचे कार्ड, 4vw अंतर आणि 6vw मथळा घ्या. 375 px च्या फोनवर ते 300 px, 15 px आणि 22.5 px होतात. 768 px च्या टॅब्लेटवर 614 px, 30.7 px आणि 46 px. 1440 px च्या डेस्कटॉपवर 1152 px, 57.6 px आणि 86.4 px. तिन्ही शेजारी शेजारी पाहिल्याने कार्ड डेस्कटॉपवर खूपच रुंद आणि मथळा खूपच मोठा आहे, आणि तुम्हाला बहुधा कमाल रुंदी आणि clamp हवे आहे, हे तुम्हाला एकदम कळते.

व्ह्यूपोर्टच्या पलीकडे

कंटेनर एकके

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

लहान, मोठे आणि गतिशील व्ह्यूपोर्ट

फोनवर पत्ता पट्टी सरकून जाते तसे दृश्य क्षेत्र बदलते. उंचीसाठी नवी एकके svh, lvh आणि dvh लहान, मोठा आणि गतिशील व्ह्यूपोर्ट वर्णन करतात. रुंदीसाठी परिस्थिती सोपी आहे, कारण पत्ता पट्टी तिच्यावर परिणाम करत नाही, आणि vw स्थिर आहे. मोबाइलवर द्रव डिझाइनसाठी vw हे vh पेक्षा सुरक्षित एकक असण्याचे हे आणखी एक कारण आहे.

टक्का, vw आणि ग्रिड

टक्का रुंदी पालकाचे अनुसरण करतात, vw खिडकीचे आणि CSS grid व flexbox उपलब्ध जागेचे. अनेकदा सर्वोत्तम द्रव मांडण्या रचनेसाठी grid आणि टक्के वापरतात आणि vw फक्त मजकूर व अंतरासाठी, कारण त्या गोष्टींना पडद्याचे थेट अनुसरण करण्याचा फायदा होतो. मांडणी तपासायला तुम्ही vw ला px मध्ये रूपांतरित करता तेव्हा ग्रिड ट्रॅकने तेच अधिक मजबूतपणे सांगितले असते का ते विचारा.

CSS न लिहिणाऱ्या लोकांना vw समजावणे

खिडकीला मोजपट्टी म्हणून वापरा

vw म्हणजे पडद्याच्या रुंदीचा एक टक्का असे सांगितले की ग्राहक आणि सहकारी सहसा कल्पना समजतात. 5 vw चा मथळा म्हणजे पडद्याच्या पाच टक्के रुंद. मग त्यांना दोन आकडे दाखवा: त्यांच्या स्वतःच्या फोनवर आणि बैठक खोलीतील मोठ्या मॉनिटरवर ते किती होते. दोन्ही रुंदींसाठी तुम्ही vw ला px मध्ये रूपांतरित करता आणि निकाल मोठ्याने सांगता तेव्हा पडद्यासोबत हलणाऱ्या आकाराची कल्पना मूर्त होते.

डिझाइन निश्चित का नाही ते सांगा

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

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

CSS पिक्सेल

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

व्ह्यूपोर्ट एकके

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

द्रव कोड समजण्याजोगा ठेवणाऱ्या सवयी

पिक्सेल मूल्यांवर टिप्पणी द्या

font-size: clamp(2rem, 1rem + 4vw, 6rem); /* 32px at 360, 96px at 1440 */ अशी ओळ काही शब्द घेते आणि पुढच्या वाचकाची अनेक रूपांतरणे वाचवते.

डिझाइन रुंदी एका जागी ठेवा

तुमच्या प्रकल्पात डिझाइन ज्या रुंदीवर काढली त्यासाठी सानुकूल गुणधर्म असेल, तर प्रत्येक vw मूल्य त्याच्याकडे शोधता येते. आढाव्यासाठी तुम्ही vw ला px मध्ये रूपांतरित करता तेव्हा कोणती रुंदी वापरायची ते तुम्हाला माहीत असते.

vw काटकसरीने वापरा

vw मूल्यांची छोटी यादी तर्क करायला सोपी असते. जिथे सर्व काही vw मध्ये आहे अशी स्टाइलशीट तशी नसते. ते प्रदर्शन मजकूर, मोठी अंतरे आणि कलाकृतीसाठी राखा.

महत्त्वाचे असेल तेव्हा खऱ्या उपकरणांवर चाचणी करा

ब्राउझर साधने रुंदी चांगल्या प्रकारे अनुकरण करतात, पण खरा फोन पत्ता पट्ट्या, फिरवणे आणि झूम यांचे खरे वर्तन दाखवतो. उपकरणावरील पाच मिनिटांची तपासणी अनुकरण चुकवते ते पकडते.

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

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

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

समजा चाचणीकार कळवतो की लहान फोनवर हीरो शीर्षक वाचायला कठीण आहे. स्टाइलशीट मर्यादांशिवाय font-size: 5.2vw म्हणते. तुम्ही 360 वर vw ला px मध्ये रूपांतरित करता आणि 18.7 px वाचता, 768 वर 39.9 px, 1440 वर 74.9 px. अरुंद टोकाला शीर्षक मुख्य मजकुरापेक्षा थोडेच मोठे असते आणि यापुढे शीर्षकासारखे वाचले जात नाही. तुम्ही clamp(2rem, 1rem + 4vw, 5rem) सुचवता, जे सर्वात अरुंद वर 32 px, 768 वर सुमारे 51 px आणि सर्वात रुंद वर 5rem, 80 px, देते. चाचणीकार पुष्टी करतो की ते आता चांगले वाचले जाते, आणि शीर्षक तरीही मोजले जाते.

एक छोटी तपासणी यादी

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

तुम्हाला महत्त्वाच्या वाटणाऱ्या रुंदी निवडा, डेव्हलपर साधनांतून किंवा तुमच्या लक्ष्य उपकरणांच्या यादीतून.

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

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

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

टोके पाहा. कोणत्याही टोकाला आकार खूप लहान किंवा खूप मोठा असेल, तर clamp() ने मर्यादा जोडा.

सामान्य चुका

एकच उत्तर गृहीत धरणे

vw मूल्याचा प्रत्येक रुंदीवर वेगळा पिक्सेल आकार असतो. प्रत्येक आकड्यासोबत रुंदी द्या.

स्क्रोलबार विसरणे

100vw त्याचा समावेश करते, म्हणून पूर्ण-रुंदीचा खोका ओव्हरफ्लो होऊ शकतो.

मुख्य मजकुराचा आकार फक्त vw मध्ये ठरवणे

तो झूम करता येत नाही. rem पद आणि मर्यादा जोडा.

तुमचे आकडे तुमच्या उपकरणावरच राहतात

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

सारांश

इथे vw ला px मध्ये रूपांतरित करायला vw मधील आकार आणि खिडकीची रुंदी टाइप करा, आणि px = vw × width ÷ 100 या सूत्राने पिक्सेलमधील निकाल लगेच वाचा. रुंदी 1440 px वर सुरू होते, ही रुंदी ज्यावर डिझाइन अनेकदा काढली जातात, पण ती सवय आहे, मानक नाही, म्हणून तुमची स्वतःची टाइप करा. रूपांतरण पडद्याचा वाटा राखते: एक vw म्हणजे व्ह्यूपोर्ट रुंदीचा शंभरावा भाग, म्हणून vw मधील आकार खिडकीसोबत वाढतो आणि आक्रसतो. rem च्या उलट vw ला डिफॉल्ट नाही, कारण व्ह्यूपोर्ट म्हणजे वाचकाची खिडकी जेवढी रुंद असेल तेवढाच. मजकुरासाठी vw ला rem सोबत clamp() मध्ये जोडा, म्हणजे तो वाचनीय आणि झूम करण्याजोगा राहतो. काहीही अपलोड केले जात नाही.