Posted on • Updated on
CSS میں VW یونٹ کو سمجھنا
CSS ویوپورٹ چوڑائی یونٹ کے بارے میں عام سوالات
آخر میں، ہم CSS ویوپورٹ چوڑائی یونٹ کے بارے میں اکثر پوچھے جانے والے چند سوالات کے جواب دیں گے۔
CSS میں vw یونٹ کیا ہے؟
CSS میں vw یونٹ ویوپورٹ کی چوڑائی کی پیمائش کرتا ہے۔ ویوپورٹ براؤزر کا وہ حصہ ہے جس میں ویب سائٹ دکھائی جاتی ہے۔ vw یونٹ آپ کو ویوپورٹ کی چوڑائی آسانی سے ناپنے اور اس نظر آنے والے حصے کے تناسب سے عناصر کا سائز مقرر کرنے دیتا ہے۔
ویوپورٹ چوڑائی یونٹ کیسے کام کرتا ہے؟
ویوپورٹ یونٹس ویوپورٹ کے ابعاد کے فیصد پر مبنی ہوتے ہیں۔ مثال کے طور پر، 1vw ویوپورٹ کی چوڑائی کے 1% کے برابر ہے۔
ویوپورٹ چوڑائی یونٹ کب استعمال کرنا چاہیے؟
ویوپورٹ چوڑائی یونٹ ایسے جوابی لے آؤٹس اور عناصر بنانے کے لیے مفید ہے جو اسکرین کی چوڑائی کے مطابق ڈھلتے ہیں۔ اسے اکثر فونٹس، وقفوں اور عناصر کے سائز کے لیے استعمال کیا جاتا ہے تاکہ وہ مختلف اسکرین چوڑائیوں پر اچھے دکھائی دیں۔
ویوپورٹ چوڑائی یونٹ کے کچھ عام استعمال کیا ہیں؟
ویوپورٹ چوڑائی یونٹ عموماً فونٹ کے سائز مقرر کرنے، جوابی لے آؤٹس بنانے اور یہ یقینی بنانے کے لیے استعمال ہوتا ہے کہ کنٹینر جیسے عناصر مختلف اسکرین چوڑائیوں کے ساتھ اچھی طرح ڈھل جائیں۔
ویوپورٹ چوڑائی یونٹ سے فونٹ کا سائز کیسے مقرر کروں؟
font-size: 5vw; فونٹ کا سائز ویوپورٹ چوڑائی کے 5% پر مقرر کرے گا۔ مگر کچھ اسکرینوں پر فونٹ بہت بڑا یا بہت چھوٹا ہو سکتا ہے۔ آپ CSS کے calc() فنکشن (مثلاً font-size: calc(110% + 0.25vw);) یا CSS کے clamp() فنکشن (مثلاً font-size: clamp(1em, 10dvw, 15rem);) کو استعمال کر سکتے ہیں۔
ویوپورٹ چوڑائی یونٹ کا حساب کیسے لگایا جاتا ہے؟
vw CSS میں ویب صفحات کے سائز اور لے آؤٹس متعین کرنے کے لیے استعمال ہونے والی نسبتی پیمائشی اکائی ہے۔ یہ ویوپورٹ، یعنی براؤزر کے نظر آنے والے حصے، کی چوڑائی کا فیصد ظاہر کرتی ہے۔
حساب سادہ ہے: 1vw ویوپورٹ کی چوڑائی کے 1% کے برابر ہے۔
مثال کے طور پر، اگر ویوپورٹ کی چوڑائی 1920px ہو تو 1vw برابر 19.2px ہوگا۔
یہ اکائی جوابی ویب ڈیزائن میں مفید ہے کیونکہ ویوپورٹ کے سائز کے ساتھ بدلتی ہے۔ براؤزر کا سائز تبدیل کرنے پر vw والے عناصر کا سائز متناسب طور پر بدلتا ہے، جس سے ڈیسک ٹاپ اور موبائل دونوں کے لیے اچھے ڈیزائن بنانا آسان ہوتا ہے۔
کیا ویوپورٹ چوڑائی یونٹ کو کسی دوسری یونٹ کے ساتھ استعمال کیا جا سکتا ہے؟
ہاں، آپ ویوپورٹ چوڑائی یونٹ کو کسی دوسری CSS یونٹ کے ساتھ ملا سکتے ہیں۔ مثال کے طور پر، font-size کے لیے vw اور margin یا padding کے لیے px استعمال کر سکتے ہیں۔
کیا تمام براؤزر ویوپورٹ چوڑائی یونٹ کی حمایت کرتے ہیں؟
Chrome، Firefox، Safari اور Edge سمیت جدید براؤزر ویوپورٹ چوڑائی یونٹ کی حمایت کرتے ہیں۔ آپ caniuse کی دستاویزات میں اس کی حمایت کے بارے میں پڑھ سکتے ہیں۔
اپنے کوڈ میں ویوپورٹ چوڑائی یونٹ کیسے استعمال کروں؟
CSS ویوپورٹ یونٹس استعمال کرنے کے لیے انہیں اپنی CSS ڈکلیئریشنز میں شامل کریں۔ مثال کے طور پر، کسی عنصر کی چوڑائی ویوپورٹ چوڑائی کے 50% پر رکھنے کے لیے لکھیں: width: 50vw;۔ اسی طرح، عنصر کی اونچائی ویوپورٹ اونچائی کے 70% پر رکھنے کے لیے لکھیں: height: 70vh;۔ آپ vmin اور vmax بھی اسی طرح استعمال کر سکتے ہیں۔
ویوپورٹ چوڑائی یونٹ موبائل پر لے آؤٹ کو کیسے متاثر کرتا ہے؟
موبائل پر vw یونٹ تمام آلات کی طرح ہی کام کرتا ہے۔ تاہم موبائل پر اسکرین کی چوڑائی عموماً کم ہوتی ہے، اس لیے ویوپورٹ چوڑائی یونٹ میں مخصوص عناصر کے اصل سائز مختلف ہو سکتے ہیں۔
کیا font-size کے لیے ویوپورٹ چوڑائی یونٹ استعمال کیا جا سکتا ہے؟
ہاں، ویوپورٹ چوڑائی یونٹ font-size مقرر کرنے کے لیے استعمال کیا جا سکتا ہے۔ اسے ایسی جوابی ٹائپوگرافی بنانے کے لیے استعمال کیا جا سکتا ہے جو اسکرین کی چوڑائی کے ساتھ اسکیل ہو۔ ٹائپوگرافی میں vw یونٹ کی مثال: font-size: 5vw;
ویوپورٹ چوڑائی یونٹ اور فیصد یونٹ میں کیا فرق ہے؟
ویوپورٹ چوڑائی یونٹ اور فیصد یونٹ دونوں نسبتی یونٹس ہیں۔ فیصد یونٹ پیرنٹ عنصر کے سائز پر مبنی ہوتی ہے، جبکہ ویوپورٹ چوڑائی یونٹ اسکرین کی چوڑائی پر مبنی ہوتی ہے۔ اس کا مطلب ہے کہ 50% چوڑائی والا عنصر اپنے پیرنٹ کی آدھی چوڑائی کا ہوگا۔ 50vw چوڑائی والا عنصر اسکرین کی آدھی چوڑائی کا ہوگا۔
لینڈ اسکیپ موڈ میں ویوپورٹ چوڑائی یونٹ کو کیسے استعمال کروں؟
لینڈ اسکیپ موڈ میں ویوپورٹ کی چوڑائی بدل جاتی ہے، اس لیے ویوپورٹ چوڑائی یونٹ کا حساب نئے ابعاد کی بنیاد پر ہوتا ہے۔ اسے مختلف رخ کے مطابق ڈھلنے والے ڈیزائن بنانے کے لیے استعمال کیا جا سکتا ہے۔
کیا میں پرنٹ اسٹائل شیٹس میں ویوپورٹ چوڑائی یونٹ استعمال کر سکتا ہوں؟
ویوپورٹ چوڑائی یونٹ بنیادی طور پر اسکرین میڈیا میں استعمال کے لیے بنائی گئی ہے، اس لیے یہ پرنٹ اسٹائل شیٹس میں توقع کے مطابق کام نہیں کر سکتی۔ پرنٹ کے لیے inches یا points جیسی مطلق یونٹس استعمال کرنے کی سفارش کی جاتی ہے۔