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 ÷ width × 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 ÷ width × 100 استعمال کرتے ہوئے۔ چوڑائی 1440 px سے شروع ہوتی ہے، وہ چوڑائی جس پر ڈیزائن اکثر بنائے جاتے ہیں، لیکن یہ عادت ہے معیار نہیں، اس لیے اپنی ٹائپ کیجیے۔ تبدیلی اسکرین کا حصہ رکھتی ہے: ایک vw ویو پورٹ کی چوڑائی کا سواں حصہ ہے، اس لیے vw میں سائز ونڈو کے ساتھ بڑھتا اور سکڑتا ہے۔ rem کے برعکس، vw کا کوئی ڈیفالٹ نہیں، کیونکہ ویو پورٹ بس اتنا چوڑا ہے جتنی قاری کی ونڈو ہو۔ متن کے لیے vw کو clamp() کے اندر rem کے ساتھ ملائیے، تاکہ وہ پڑھنے اور زوم کرنے کے قابل رہے۔ کچھ اپ لوڈ نہیں ہوتا۔