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 देखिए

अच्छी तरह लिखा तरल कोड clamp(min, preferred, max) से vw के आसपास सीमाएँ रखता है। अगर आप 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 ग्रिड व फ़्लेक्सबॉक्स उपलब्ध स्थान का। अक्सर सबसे अच्छे तरल लेआउट संरचना के लिए ग्रिड और प्रतिशत उपयोग करते हैं और 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 का कोई डिफ़ॉल्ट नहीं, क्योंकि व्यूपोर्ट उतना ही चौड़ा है जितनी पाठक की विंडो। पाठ के लिए clamp() के भीतर vw को rem से मिलाइए, ताकि वह पढ़ने योग्य और ज़ूम योग्य रहे। कुछ अपलोड नहीं होता।