Posted on • Updated on
درک واحد VW در CSS
پرسشهای متداول درباره واحد عرض نمای دید در CSS
در پایان به چند پرسش متداول درباره واحد عرض نمای دید در CSS پاسخ میدهیم.
واحد vw در CSS چیست؟
واحد vw در CSS عرض ناحیهٔ دید را اندازه میگیرد. ناحیهٔ دید بخشی از مرورگر است که وبسایت در آن نمایش داده میشود. واحد 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 دیگری ترکیب کنید. برای نمونه، میتوانید از vw برای font-size و از px برای margin یا padding استفاده کنید.
آیا همهٔ مرورگرها از واحد عرض ناحیهٔ دید پشتیبانی میکنند؟
مرورگرهای مدرن، از جمله 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 توصیه میشود.