واحدها در CSS
از قبل می‌دانید چطور اعلانی مثل color: teal بنویسید. ویژگی‌های اندازه ایدهٔ دومی می‌خواهند: چقدر بزرگ. font-size: 16 به‌تنهایی برای بیشتر ویژگی‌های طول معتبر نیست — مرورگر به یک واحد نیاز دارد تا بداند «۱۶» یعنی چه.
واحدهای CSS چیست؟
واحدهای CSS پسوند اندازه‌گیری متصل به مقادیر طول‌اند — مثلاً px، rem، %، vw و vh. واحدهای مطلق صرف‌نظر از والد همان اندازه می‌مانند. واحدهای نسبی با چیز دیگری مقیاس می‌گیرند: فونت عنصر، فونت ریشه، اندازهٔ والد، یا viewport.
مطلق در برابر نسبی در یک نگاه
این جدول را مثل نقشه نگه دارید. روز اول به همهٔ واحدها نیاز ندارید — خانواده‌ها را بشناسید، بعد واحدهای روزمره را تمرین کنید.
📊 واحدهای رایج طول در CSS
| واحد | خانواده | کاربرد معمول |
|---|---|---|
| px | مطلق (پیکسل صفحه) | بوردر، تنظیم ریز آیکون، خطوط ۱px |
| rem | نسبی به اندازهٔ فونت ریشه | متن صفحه و فاصله‌های یکدست |
| em | نسبی به فونت خودِ عنصر | padding که با متن محلی رشد کند |
| % | نسبی به اندازهٔ والد | عرض‌های سیال داخل ظرف |
| vw | نسبی به عرض viewport | بخش‌های تمام‌عرض (با احتیاط) |
| vh | نسبی به ارتفاع viewport | ارتفاع هیرو، پنل تمام‌صفحه |
پیکسل (px)
px روی صفحه واحدی مطلق است. برای بوردر نازک و جزئیات ثابت قابل پیش‌بینی است. به‌عنوان تنها واحد تایپوگرافی در سایت ریسپانسیو کمتر ایده‌آل است، چون مثل rem به‌طور خودکار با ترجیح فونت ریشهٔ کاربر مقیاس نمی‌گیرد.
اندازهٔ پیکسلی برای حاشیهٔ کارت
css.card {
border: 1px solid #cbd5e1;
border-radius: 8px;
width: 320px;
}وقتی px هنوز می‌درخشد
برای بوردر مویی، افست سایه و جزئیات ریز UI که لبهٔ ثابت می‌خواهید px را ترجیح دهید. وقتی طراحی باید با اندازهٔ فونت یا عرض ظرف نفس بکشد، واحد نسبی بهتر است.
rem و em
rem نسبی به اندازهٔ فونت عنصر ریشه است (معمولاً <html>). em نسبی به اندازهٔ فونت خودِ عنصر است (یا والد، بسته به ویژگی). برای مبتدی‌ها، rem پیش‌فرض امن‌تری برای font-size و بسیاری از فاصله‌هاست چون در تو در تو بودن عناصر ثابت می‌ماند.
تایپ نسبی به ریشه با rem
csshtml {
font-size: 100%; /* often 16px in browsers */
}
.lead {
font-size: 1.25rem; /* ~20px if root is 16px */
margin-bottom: 0.75rem;
}em در یک جمله
وقتی می‌خواهید مقدار با فونت محلی مقیاس بگیرد از em استفاده کنید — مثلاً padding که اگر متن همان جزء بزرگ‌تر شود رشد کند. اگر emهای تو در تو ضرب شوند و «سربروند»، آن اندازه‌ها را به rem عوض کنید.
درصد (%)
درصد نسبی به اندازه‌گیری والد است. برای width: 50% عنصر حدوداً نصف عرض والد را هدف می‌گیرد (وقتی والد عرض تعریف‌شده دارد). درصد ابزار کلاسیک چیدمان سیال داخل ظرف است.
عرض سیال با درصد
css.sidebar {
width: 30%;
}
.main {
width: 70%;
}واحدهای viewport (vw و vh)
1vw برابر ۱٪ عرض viewport است؛ 1vh برابر ۱٪ ارتفاع viewport. برای هیرو تمام‌صفحه قدرتمندند، اما راحت زیاده‌روی می‌شوند — متنی که فقط با vw اندازه بگیرد در صفحه‌های خیلی عریض یا خیلی باریک ناخوانا می‌شود.
ارتفاع viewport برای هیرو
css.hero {
min-height: 80vh;
padding: 2rem;
}عادت پیش‌فرض انتخاب واحد
عادت عملی شروع: rem برای اندازهٔ فونت و بیشتر فاصله‌های عمودی، % یا ابزارهای چیدمان انعطاف‌پذیر (بعداً: Flexbox/Grid) برای عرض، و px برای بوردر و جزئیات ثابت ریز. واحدهای viewport را وقتی بخش تمام‌عرض می‌سازید دوباره ببینید — نه برای هر margin.
خودتان امتحان کنید
- قانونی برای
.cardبسازید باwidth: 80%،max-width: 24remوborder: 1px solid #94a3b8. - تنظیم کنید
.card h2 { font-size: 1.5rem; }و یک پاراگراف کوتاه در1rem. - بخشی با
.banner { min-height: 40vh; }بالای کارت اضافه کنید. - پنجرهٔ مرورگر را تغییر اندازه دهید و
html { font-size: … }ریشه را عوض کنید تا ببینید%،vhوremچطور متفاوت واکنش می‌دهند. - اختیاری: عنوان را داخل
.cardبه1.5emتبدیل کنید و ببینید اندازهٔ تو در تو غافلگیرتان می‌کند یا نه.
اشتباهات رایج
- نوشتن
font-size: 16بدون واحد — برای طول در CSS استاندارد نامعتبر است - فقط
pxبرای همهٔ فونت‌های سایتی که باید زوم/ترجیح کاربر را رعایت کند - تو در تو کردن زیاد
emتا متن خیلی بزرگ یا خیلی کوچک شود - تنظیم متن بدنه فقط با
vwتا در مانیتورهای بزرگ خطوط منفجر شوند - فرض اینکه ارتفاع
%کار می‌کند وقتی والد ارتفاع صریح ندارد
خلاصه
- مقادیر طول معمولاً به واحد نیاز دارند (
px،rem،%،vw، …) - واحد مطلق ثابت می‌ماند؛ واحد نسبی با فونت، والد یا viewport مقیاس می‌گیرد
- برای تایپ
rem، برای عرض%/سامانهٔ چیدمان، برای بوردر ریزpxرا ترجیح دهید emبا فونت محلی؛vw/vhبا viewport مقیاس می‌گیرند- واحد را با کار جور کنید — یک واحد را همه‌جا تحمیل نکنید
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود