در واحدهای نسبی یک اندازه طولی نسبت به یک اندازه طولی دیگر محاسبه می شود به همین دلیل به آنها نسبی می گویند.
زمانی که از واحدهای نسبی در سی اس اس استفاده می کنیم خروجی ما به راحتی می تواند در محیطهای گوناگون وفق پیدا کند.
این واحدها در دوسته واحدهای نسبی وابسته به فونت و واحدهای نسبی وابسته به Viewport قرار می گیرند.
واحدهای نسبی وابسته به فونت
این واحدها در سی اس اس شامل چهار واحد ch, ex, em و rem می باشند.
استفاده از اینگونه واحدها مزیت های زیادی دارد به عنوان نمونه زمانی که کاربر صفحه را بزرگنمایی می کند دیگر فقط متن بزرگ نمی شود بلکه عناصر نگهدارنده متن هم به همان تناسب بزرگ می شوند و این موضوع برای طراحی های دسترسی پذیر و واکنشگرا بسیار سودمند است.
em
این واحد نمایانگر ویژگی font-size می باشد. یعنی 1em برابر مقداری است که برای ویژگی font-size عنصر تعیین می شود.
font-size: 20px;
padding: 2em; /* 2*20px = 40px */
اگر em برای خود font-size استفاده شود آنگاه برای محسابه کردن em باید به font-size پدر عنصر مورد نظر مراجعه کنیم.
این واحد بطور کامل در مطلب “راهنمای کامل em و rem” شرح داده شده است.
ex
از این واحد خیلی به ندرت استفاده می شود. واحد ex بر اساس اندازه ارتفاع کاراکتر x (کوچک) در فونتی که برای عنصر مورد استفاده قرار میگیرد مشخص می شود.
برخی مرورگرها ارتفاع x را دقیقا محاسبه می کنند در حالی که مرورگرهای دیگر برای آن یک مقدار تعیین می کنند که در بیشتر مواقع آن مقدار حدودا 0.5em می باشد.
در مثال زیر ارتفاع خطوط متن را برابر با 230 درصد ارتفاع کاراکتر x قرار می دهیم:
p {
font-family: "Arial", sans-serif;
line-height: 2.3ex;
}
توجه داشته باشید که اگر فونت Arial برای عنصر استفاده شود ارتفاع x آن فونت, مبنا می باشد اما اگر این فونت به هر نحوی در دسترس نباشد و فونت sans-serif برای عنصر استفاده شود اندازه ارتفاع کاراکتر x آن تعیین کننده است.
ch
واحد ch بر اساس اندازه عرض کاراکتر 0 (صفر) در فونتی که برای عنصر مورد استفاده قرار میگیرد مشخص می شود.
به عنوان نمونه در مثال زیر فاصله داخلی عنصر را به اندازه 10 برابر کاراکتر صفر فونتش مشخص کرده ایم:
.element {
padding: 10ch;
}
rem
این واحد کاملا شبیه به em عمل می کند با این تفاوت که به جای اینکه مبنای آن font-size عنصر مورد نظر باشد, اندازه فونتی است که برای عنصر ریشه یا همان <html> توسط ویژگی font-size تعیین شده است.
برای بررسی کامل این واحد به مطلب “راهنمای کامل em و rem” مراجعه کنید.
واحدهای نسبی وابسته به Viewport
این واحدها که شامل چهار واحد vmin, vw, vh و vmax می باشند وابسته به اندازه viewport یا همان قابی از صفحه که که در یک لحظه قابل مشاهده توسط کاربر است می باشند.
زمانی که اندازه viewport تغییر کند باید اندازه این واحدها نیز تغییر کند. برای اینکه موضوع راحت تر درک شود فرض کنید اندازه فونت یک متن را با استفاده از یکی از این واحدها تعیین می کنیم. حال اگر پنجره مرورگر را بزرگ یا کوچک کنیم (که این کار باعث می شود اندازه viewport تغییر کند) باید اندازه متن هم نسبت به تغییرات آن تغییر کند.
حال می توان تصور کرد که چقدر استفاده از این واحدها برای زمانی که واکنشگرا طراحی می کنیم می تواند با ارزش باشد. چراکه این واحدها وابسته به اندازه دستگاه یعنی موبایل, تبلت و غیره تغییر می کنند.
vh
vh یا همان viewport height وابسته به ارتفاع viewport است.
یک واحد vh برابر با یک صدم ارتفاع viewport است. یعنی 1vh برابر 1% ارتفاع viewport خواهد بود.
وقتی اندازه فونت یک عنصر را با استفاده از درصد تعیین میکنیم آن درصد بر اساس اندازه فونت عنصر پدرش مورد محاسبه قرار می گیرد.
p {
font-size: 150%;
}
یعنی 150 درصد اندازه فونت عنصر پدر پاراگراف.
اما اگر از واحد vh استفاده کنیم دیگر محاسبات کاری به عنصر نگهدارنده ندارد و مستقیما سراغ Viewport می رود. به عنوان نمونه اندازه فونت عنصر پاراگراف زیر برابر 10 درصد ارتفاع viewport می باشد.
فرض کنید ارتفاع viewport برابر با 400 پیکسل باشد داریم:
p {
font-size: 5vh; /* (5*400)/100 = 20px */
}
دموی زیر را بصورت تمام صفحه باز کنید و ارتفاع مرورگر را کم و زیاد کنید:
vw
vw یا همان viewport width وابسته به عرض viewport است.
یک واحد vw برابر با یک صدم عرض viewport است. یعنی 1vw برابر 1% عرض viewport خواهد بود.
این واحد کاملا مشابه با واحد vh عمل می کند با این تفاوت که مربوط به عرض viewport است.
اگر از واحد vw استفاده کنیم به عنوان نمونه اندازه فونت عنصر پاراگراف زیر برابر 10 درصد عرض viewport می باشد.
فرض کنید عرض viewport برابر با 400 پیکسل باشد داریم:
p {
font-size: 5vw; /* (5*400)/100 = 20px */
}
دموی زیر را بصورت تمام صفحه باز کنید و عرض مرورگر را کم و زیاد کنید:
vmin
واحد vmin برابر با مینیمم واحدهای vh و vw می باشد. یعنی 1vmin برابر با 1 درصد طول بعد کوچکتر viewport می باشد.
در مثال زیر اندازه فونت p برابر با 10 درصد طول بعد کوچکتر viewport خواهد بود:
p {
font-size: 10vmin;
}
vmax
واحد vmax برابر با ماکزیمم واحدهای vh و vw می باشد. یعنی 1vmax برابر با 1 درصد طول بعد بزرگتر viewport می باشد.
در مثال زیر اندازه فونت p برابر با 10 درصد طول بعد بزرگتر viewport می باشد:
p {
font-size: 10vmax;
}
کدام واحد؟
با وجود این تعداد واحدهای مختلف مطلق و نسبی شاید این سوال در ذهن ایجاد شود که آیا از هر کدام برای یک ویژگی خاص در سی اس اس باید استفاده کنیم؟ یا نه؟
جواب این است که می توان از هر یک از این واحدها برای هر ویژگی که اندازه طولی می پذیرد استفاده کرد.
اما باید به چند نکته توجه کنیم:
1. آیا خروجی ما مانیتور و اسکرین ها هستند؟ یا کاغذ, خروجی مد نظر ما می باشد؟
2. آیا واحد مورد نظر توسط مرورگرهایی که پروژه ما باید پشتیبانی کند, پشتیبانی می شود یا نه؟
3. آیا در حال ساختن ماژولی هستیم که باید به راحتی در جاهای دیگر مورد استفاده قرار گیرد و به راحتی بتوانیم اندازه های موجود در آن را تغییر دهیم بدون اینکه به دردسر بیافتیم؟
این ها سوال هایی هستند که در زمان انتخاب واحدها باید پرسیده شود و جواب آنها و انتخاب واحد مناسب تنها با تمرین و به مرور زمان با تجربه حاصل می شود.
همینطور چنین مطالبی قطعا می توانند به جواب دادن به این سوالات کمک کنند.
همچنین جدول زیر که از این مطلب گرفته شده است را با دقت بررسی کنید:
| توصیه می شود | در موارد خاص | توصیه نمی شود | |
|---|---|---|---|
| صفحه نمایش (screen) | em, px, % | ex | pt, cm, mm, in, pc |
| چاپ | em, cm, mm, in, pt, pc, % | px, ex |
پشتیبانی مرورگر ها
برای بررسی پشتیبانی مرورگرها در مورد واحدهای نسبی وابسته به فونت به این آدرس مراجعه کنید.
همچنین در مورد واحدهای نسبی وابسته به viewport جدول زیر گویای مطلب می باشد:
em
,rem
,vh
,vmax
,vmin
,vw
,اندازه گیری در css
,واحد نسبی
,واحدهای اندازه گیری در css
,واحدهای نسبی در سی اس اس
