CSS Units
۱. واحدهای مطلق
اندازه‌هایی که ثابت هستند و نسبت به صفحه یا المان‌های دیگر تغییر نمی‌کنند.
* `px` — پیکسل
رایج‌ترین واحد. اندازه ثابت بر اساس پیکسل‌های صفحه نمایش.
* `pt` — پوینت (۱ پوینت = ۱/۷۲ اینچ)
بیشتر در چاپ استفاده می‌شود.
* `cm` — سانتی‌متر
* `mm` — میلی‌متر
* `in` — اینچ
* `pc` — پیکا (۱ پیکا = ۱۲ پوینت)
—
۲. واحدهای نسبی
اندازه‌هایی که نسبت به چیز دیگری اندازه‌گیری می‌شوند.
* `%` — درصد
نسبت به اندازه والد (مثلاً عرض: ۵۰% یعنی نصف عرض والد).
* `em` — نسبت به اندازه فونت خود المان
مثلاً اگر اندازه فونت ۱۶ پیکسل باشد، ۲em برابر ۳۲ پیکسل است.
* `rem` — نسبت به اندازه فونت ریشه (معمولاً تگ `<html>`)
معمولاً ۱rem برابر ۱۶ پیکسل است مگر تغییر داده شود.
* `vw` — درصدی از عرض صفحه نمایش (۱vw = ۱% از عرض صفحه)
* `vh` — درصدی از ارتفاع صفحه نمایش (۱vh = ۱% از ارتفاع صفحه)
* `vmin` — کوچکتر از vw و vh
* `vmax` — بزرگتر از vw و vh
—
۳. واحدهای ویژه
* `ch` — عرض کاراکتر “۰” در فونت جاری
* `ex` — ارتفاع حرف کوچک “x” در فونت جاری (کم‌تر استفاده می‌شود)
—
مثال استفاده
“`css
div {
width: 50%; /* نصف عرض والد */
font-size: 2em; /* دو برابر اندازه فونت خود المان */
margin: 10px; /* فاصله ثابت ۱۰ پیکسل */
padding: 1rem; /* فاصله داخلی نسبت به اندازه فونت ریشه */
height: 50vh; /* نصف ارتفاع صفحه نمایش */
}
“`
دیدگاهتان را بنویسید