مقدمه
در CSS واحدهای مختلفی برای تعیین اندازه ویژگی‌ها وجود دارد. آشنایی با این واحدها به شما کمک می‌کند طراحی‌هایی منعطف‌تر، حرفه‌ای‌تر و سازگار با انواع نمایشگرها ایجاد کنید.
واحد CSS چیست؟
واحد CSS مشخص می‌کند مقدار یک ویژگی چه اندازه‌ای باشد.
برای مثال:
p {
margin: 20px;
}در این مثال:
marginیک ویژگی (Property) است.20pxمقدار (Value) است.pxواحد CSS محسوب می‌شود.
سؤال مهم اینجاست:
بهترین واحد برای هر موقعیت چیست؟
برای پاسخ به این سؤال ابتدا باید دو دسته اصلی واحدها را بشناسیم:
- واحدهای مطلق (Absolute)
- واحدهای نسبی (Relative)
واحدهای مطلق (Absolute Units)
واحدهای مطلق همیشه اندازه ثابتی دارند و به اندازه والد یا صفحه نمایش وابسته نیستند.
بنابراین اگر یک عنصر را با واحد مطلق تعریف کنید، تقریباً در موبایل، تبلت و مانیتورهای بزرگ با همان اندازه نمایش داده می‌شود.
مزایا
- اندازه کاملاً ثابت
- مناسب برای طراحی‌های غیرواکنش‌گرا
معایب
- برای سایت‌های Responsive مناسب نیستند.
- با تغییر اندازه صفحه مقیاس نمی‌شوند.
انواع واحدهای مطلق
| واحد | توضیح | مثال |
|---|---|---|
| px | پیکسل | font-size: 12px; |
| pt | هر 72pt برابر 1 اینچ | font-size: 12pt; |
| pc | هر 1pc برابر 12pt | font-size: 1pc; |
| cm | سانتی‌متر | font-size: 0.6cm; |
| mm | میلی‌متر | font-size: 4mm; |
| in | اینچ | font-size: 0.2in; |
پرکاربردترین واحد مطلق
font-size: 16px;واحد px رایج‌ترین واحد برای صفحات وب است.
واحدهای نسبی (Relative Units)
واحدهای نسبی بر اساس اندازه عنصر والد یا اندازه صفحه نمایش محاسبه می‌شوند.
این واحدها برای طراحی Responsive بسیار مناسب هستند.
انواع واحدهای نسبی
| واحد | توضیح |
|---|---|
| % | نسبت به عنصر والد |
| em | نسبت به فونت فعلی عنصر |
| rem | نسبت به فونت عنصر ریشه (html) |
| ch | نسبت به عرض کاراکتر 0 |
| vh | نسبت به ارتفاع صفحه |
| vw | نسبت به عرض صفحه |
| vmin | نسبت به کوچک‌ترین بعد صفحه |
| vmax | نسبت به بزرگ‌ترین بعد صفحه |
| ex | نسبت به ارتفاع حرف x کوچک |
واحد درصد (%)
بر اساس مقدار همان ویژگی در عنصر والد محاسبه می‌شود.
مثال:
.child {
margin: 10%;
}اگر عرض والد 1000 پیکسل باشد:
10% = 100pxکاربرد
- عرض عناصر
- فاصله‌ها
- طراحی واکنش‌گرا
واحد em
بر اساس اندازه فونت عنصر فعلی محاسبه می‌شود.
مثال:
.child {
font-size: 0.5em;
}اگر فونت والد:
font-size: 20px;باشد، اندازه فونت فرزند:
10pxخواهد شد.
کاربرد
- فاصله‌های مرتبط با متن
- اندازه فونت عناصر فرزند
واحد rem
مخفف:
Root EMاست.
این واحد همیشه بر اساس اندازه فونت عنصر <html> محاسبه می‌شود.
مثال:
.header {
font-size: 2rem;
}اگر:
html {
font-size: 16px;
}باشد:
2rem = 32pxکاربرد
- تیترها
- فاصله‌های کلی سایت
- طراحی‌های بزرگ
تفاوت em و rem
فرض کنید:
html {
font-size: 16px;
}
.parent {
font-size: 20px;
}سپس:
.child {
font-size: 2em;
}نتیجه:
40pxزیرا از والد محاسبه می‌شود.
اما:
.child {
font-size: 2rem;
}نتیجه:
32pxزیرا از html محاسبه می‌شود.
واحد ch
بر اساس عرض کاراکتر صفر (0) در فونت فعلی است.
مثال:
.small-text {
width: 10ch;
}عرض عنصر تقریباً برابر عرض 10 کاراکتر خواهد بود.
کاربرد
- فیلدهای ورودی
- نمایش تعداد مشخصی کاراکتر
واحد vh
مخفف:
Viewport Heightاست.
هر 1vh برابر 1 درصد ارتفاع صفحه نمایش است.
مثال:
.wrapper {
height: 100vh;
}عنصر کل ارتفاع صفحه را اشغال می‌کند.
کاربرد
- صفحات Landing
- Hero Section
واحد vw
مخفف:
Viewport Widthاست.
هر 1vw برابر 1 درصد عرض صفحه است.
مثال:
.half-size {
width: 50vw;
}عنصر نصف عرض صفحه را اشغال می‌کند.
واحد vmin
بر اساس کوچک‌ترین بعد صفحه محاسبه می‌شود.
مثال:
.image {
width: 100vmin;
}اگر:
عرض = 400px
ارتفاع = 800pxباشد:
100vmin = 400pxواحد vmax
بر اساس بزرگ‌ترین بعد صفحه محاسبه می‌شود.
مثال:
.image {
width: 100vmax;
}اگر:
عرض = 400px
ارتفاع = 800pxباشد:
100vmax = 800pxواحد ex
بر اساس ارتفاع حرف کوچک x در فونت فعلی محاسبه می‌شود.
مثال:
.double-x {
line-height: 2ex;
}کاربرد
این واحد کمتر استفاده می‌شود اما برای تنظیمات دقیق تایپوگرافی مفید است.
چگونه واحد مناسب را انتخاب کنیم؟
قبل از انتخاب واحد از خودتان بپرسید:
1. آیا می‌خواهم اندازه با تغییر صفحه تغییر کند؟
اگر بله:
%emremvhvw
گزینه‌های مناسبی هستند.
2. می‌خواهم نسبت به چه چیزی تغییر کند؟
| نیاز | واحد مناسب |
|---|---|
| نسبت به والد | % |
| نسبت به فونت والد | em |
| نسبت به فونت اصلی سایت | rem |
| نسبت به عرض صفحه | vw |
| نسبت به ارتفاع صفحه | vh |
| نسبت به کوچک‌ترین بعد صفحه | vmin |
| نسبت به بزرگ‌ترین بعد صفحه | vmax |
جمع‌بندی
به‌صورت کلی در طراحی‌های مدرن:
- برای اندازه فونت‌ها →
rem - برای فاصله‌های وابسته به متن →
em - برای عرض و Layout →
% - برای بخش‌های تمام صفحه →
vhوvw - برای اندازه‌های ثابت →
px
بیشترین کاربرد را دارند.
اگر بخواهیم یک قانون ساده داشته باشیم:
برای سایت‌های واکنش‌گرا تا جای ممکن از واحدهای نسبی استفاده کنید و فقط در موارد خاص سراغ px بروید.
از همراهی شما با پارمین کلود سپاسگزاریم.
