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 उन शीर्षकों और आरंभिक पट्टियों का जिन्हें हर उपकरण पर परदा भर देना है। इनके बीच रूपांतरण वही दैनिक गणित है जिससे पिक्सेलों में सौंपा गया अभिकल्प ऐसी स्टाइलशीट बनता है जो घटती-बढ़ती है।
अक्सर पूछे जाने वाले प्रश्न
16 px ही सामान्य आरंभ-बिंदु क्यों है?
क्योंकि हर बड़े ब्राउज़र में पाठ का डिफ़ॉल्ट आकार यही है, और जो स्टाइलशीट उसे न बदले वह उसे उत्तराधिकार में पाती है। सो डिफ़ॉल्ट सेटिंग पर एक rem 16 px के बराबर होता है, और परिचित रूपांतरण वहीं से आते हैं: 0.5 rem अर्थात 8 px, 1.5 rem अर्थात 24 px। यदि उपयोक्ता ने ब्राउज़र की सेटिंग में डिफ़ॉल्ट बड़ा कर रखा हो, तो वही rem मान भी उसके साथ बढ़ जाते हैं — और उन्हें बरतने का प्रयोजन ठीक यही है।
rem बरतूँ या em?
हर उस वस्तु के लिए rem जिसे पूरे पृष्ठ के पीछे चलना चाहिए — अक्षर की सीढ़ी, अंतराल, विन्यास की चौड़ाइयाँ — क्योंकि वह मूल से नापा जाता है और कभी संचित नहीं होता। हर उस वस्तु के लिए em जिसे उस पाठ के पीछे चलना चाहिए जिसमें वह बैठी है: बटन की भीतरी जगह, आइकन के बगल का अंतराल, उद्धरण की हाशियाई दूरी। सामान्य भूल यह है कि em में नापे गए तत्व एक-दूसरे में रखे जाएँ: 1.2 em के भीतर 1.2 em बन जाता है 1.44, फिर 1.73, यहाँ तक कि पृष्ठ के नीचे का पाठ अभीष्ट से दुगुना हो जाता है।
क्या उत्तर सटीक है?
जहाँ दोनों इकाइयाँ एक-दूसरे से पूर्ण संख्याओं में परिभाषित हैं, वहाँ हाँ — पृष्ठ यह बात संख्या के ऊपर कहता है, और एकमात्र गोलाई इसमें है कि कितने अंक दिखाए जाएँ। जहाँ अनुपात का दशमलव समाप्त नहीं होता, पृष्ठ बारह सार्थक अंक दिखाता है और कहता है कि संबंध सन्निकट है, कुछ और होने का ढोंग नहीं करता।
क्या मेरा लिखा हुआ मेरे उपकरण से बाहर जाता है?
नहीं। गणना आपके ही ब्राउज़र में होती है; कुछ भी अपलोड नहीं होता, और करने के लिए कोई सर्वर है भी नहीं। पृष्ठ एक बार खुल जाने पर नेटवर्क बंद होने पर भी चलता है।
आप 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 को rem के साथ clamp() के भीतर मिलाइए, ताकि वह पठनीय और ज़ूम-योग्य रहे। कुछ अपलोड नहीं होता।