واحدهای اندازه‌گیری در CSS (CSS Units)
در CSS واحدهای مختلفی برای تعیین طول وجود دارند. بسیاری از ویژگی‌های CSS مانند width، margin، padding و font-size از مقادیر طول استفاده می‌کنند.
یک “طول” عددی است که به دنبال آن یک واحد طول می‌آید، مثل 10px یا 2em.
مثال:
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}نکته: نباید فضای خالی بین عدد و واحد وجود داشته باشد. اگر مقدار برابر ۰ باشد، می‌توان واحد را حذف کرد.
برای برخی از ویژگی‌های CSS، طول‌های منفی نیز مجاز است.
واحدهای مطلق (Absolute Lengths)
واحدهای طول مطلق ثابت هستند و طولی که با این واحدها بیان می‌شود، دقیقاً به همان اندازه نمایش داده می‌شود.
این واحدها برای استفاده در صفحات نمایش توصیه نمی‌شوند، زیرا اندازه صفحه‌های نمایش متنوع است، اما می‌توانند برای خروجی‌هایی که اندازه آنها مشخص است، مانند طرح‌های چاپ، استفاده شوند.
واحدهای مطلق:
| واحد | توضیحات |
|---|---|
cm |
سانتی‌متر |
mm |
میلی‌متر |
in |
اینچ (1in = 96px = 2.54cm) |
px |
پیکسل (1px = 1/96 از 1in) |
pt |
پوینت (1pt = 1/72 از 1in) |
pc |
پیکا (1pc = 12pt) |
نکته: پیکسل‌ها (px) نسبت به دستگاه نمایش تغییر می‌کنند. برای دستگاه‌های با DPI پایین، 1px برابر با یک پیکسل دستگاه است. اما برای چاپگرها و نمایشگرهای با رزولوشن بالا، 1px ممکن است شامل چندین پیکسل دستگاه باشد.
واحدهای نسبی (Relative Lengths)
واحدهای طول نسبی، طول را نسبت به طول دیگری مشخص می‌کنند. این واحدها در سازگاری بین رسانه‌های مختلف بهتر عمل می‌کنند.
واحدهای نسبی:
| واحد | توضیحات |
|---|---|
em |
نسبت به اندازه فونت عنصر (مثلاً 2em یعنی ۲ برابر اندازه فونت فعلی) |
ex |
نسبت به ارتفاع حرف “x” در فونت فعلی (کمتر استفاده می‌شود) |
ch |
نسبت به عرض حرف “0” (صفر) |
rem |
نسبت به اندازه فونت عنصر ریشه (معمولاً <html>) |
vw |
نسبت به ۱ درصد از عرض نمای مرورگر |
vh |
نسبت به ۱ درصد از ارتفاع نمای مرورگر |
vmin |
نسبت به ۱ درصد از کوچک‌ترین بعد نمای مرورگر |
vmax |
نسبت به ۱ درصد از بزرگ‌ترین بعد نمای مرورگر |
% |
نسبت به عنصر والد |
نکته: واحدهای em و rem برای ایجاد چیدمان‌های کاملاً مقیاس‌پذیر بسیار کاربردی هستند.
Viewport: اندازه پنجره مرورگر است. به عنوان مثال، اگر عرض نمای مرورگر 50 سانتی‌متر باشد، 1vw = 0.5 سانتی‌متر است.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام