واحدها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< CSS:Tutorial(تغییرمسیر از CSS:واحد ها)
پرش به ناوبری پرش به جستجو

واحدهای CSS

CSS واحدهای متفاوتی برای نشان دادن طول دارد.[۱]

بسیاری از ویژگی‌های CSS مانند width ،margin،padding،font-size از مقادیر «طولی» استفاده می‌کنند.

طول، عددی است که همراه آن یک واحد طول نیز وجود دارد، مانند 10px, 2em و غیره…

بین عدد و واحد آن نباید فضای خالی وجود داشته باشد. اما، اگر مقدار آن ۰ است، می‌توان از نوشتن واحد صرف نظر کرد.

برای ویژگی‌های CSS، مقادیر منفی قابل استفاده هستند.

دو نوع واحد طولی وجود دارند: مطلق و نسبی.

مقادیر مطلق

مقادیر طول مطلق به صورت ثابت هستند و مقدار طولی که به وسیله این موارد مشخص شود دقیقاً به همان اندازه نمایش داده می‌شود.

توصیه شده‌است از مقادیر مطلق روی صفحه نمایش‌ها استفاده نشود، زیرا اندازه صفحه نمایش‌ها گستردگی زیادی دارد.

با این حال، اگر نوع رسانه خروجی مشخص باشد می توان از آنها استفاده کرد، همانند چیزی که برای نمای print وجود دارد.

واحد توضیحات مثال
cm سانتی‌متر مشاهدهٔ نتیجه
mm میلی‌متر مشاهدهٔ نتیجه
in (1in = 96px = 2.54cm) اینچ (inches) مشاهدهٔ نتیجه
px [* ۱] (1px = 1/96th of 1in) پیکسل (pixels) مشاهدهٔ نتیجه
pt (1pt = 1/72 of 1in) پوینت (points) مشاهدهٔ نتیجه
pc (1pc = 12 pt) picas مشاهدهٔ نتیجه

مقادیر نسبی

واحدهای طولی نسبی مقدار طول را با توجه به ویژگی length دیگری تنظیم می‌کند. واحدهای طولی نسبی در هنگام رندر در دستگاه‌های مختلف مقیاس پذیرتر هستند.

واحد توضیحات مثال
em با توجه به اندازه قلم عنصر (2em به معنای ۲ بار از اندازه جاری فونت است) مشاهدهٔ نتیجه
ex با توجه به ارتفاع محور x قلم جاری (بسیار کم استفاده می‌شود) مشاهدهٔ نتیجه
ch با توجه به عرض "۰" (صفر) مشاهدهٔ نتیجه
rem با توجه به اندازه قلم عنصر ریشه مشاهدهٔ نتیجه
vw با توجه به ۱٪ عرض [* ۲]viewport مشاهدهٔ نتیجه
vh با توجه به ۱٪ ارتفاع [* ۲]viewport مشاهدهٔ نتیجه
vmin با توجه به ۱٪ کوچکتر اندازه [* ۲]viewport مشاهدهٔ نتیجه
vmax با توجه به ۱٪ بزرگتر اندازه [* ۲]viewport مشاهدهٔ نتیجه
% با توجه به عنصر والد مشاهدهٔ نتیجه

نکته: واحدهای em و rem در ایجاد چیدمان کاملاٌ مقیاس‌پذیر، کاربردی هستند!

viewport* = اندازه پنجره مرورگر. اگر عرض viewport برابر با 50cm باشد، 1vw=0.5cm می شود.

پشتیبانی از مرورگرها

اعداد موجود در جدول زیر نشانگر اولین نسخه از مرورگرهایی هستند که به طور کامل از واحد طول پشتیبانی می‌کنند.

واحد طول Chrome.gif Edge.gif Firefox.gif Safari.gif Opera.gif
em, ex, %, px, cm, mm, in, pt, pc ۱٫۰ ۳٫۰ ۱٫۰ ۱٫۰ ۳٫۵
ch ۲۷٫۰ ۹٫۰ ۱٫۰ ۷٫۰ ۲۰٫۰
rem ۴٫۰ ۹٫۰ ۳٫۶ ۴٫۱ ۱۱٫۶
vh, vw ۲۰٫۰ ۹٫۰ ۱۹٫۰ ۶٫۰ ۲۰٫۰
vmin ۲۰٫۰ ۹٫۰* ۱۹٫۰ ۶٫۰ ۲۰٫۰
vmax ۲۶٫۰ پشتیبانی نمی‌شود ۱۹٫۰ ۷٫۰ ۲۰٫۰


نکته: اینترنت اکسپلور ۹ از vmin با نام غیراستاندارد: vm پشتیبانی می‌کند.

توضیحات

  1. پیکسل‌ها (px) با توجه به دستگاه بازدید کننده است. برای دستگاه‌هایی با dpi پایین 1px، یک پیکسل دستگاه (نقطه) نمایش است. برای پرینترها و صفحه نمایش‌هایی با رزرلوشن بالا 1px به چندین پیکسل دستگاه تبدیل می‌شود.
  2. ۲٫۰ ۲٫۱ ۲٫۲ ۲٫۳
    نکته: واحدهای em و rem در ساخت یک layout قابل scale بسیار مهم هستند! Viewport = اندازهٔ پنجرهٔ مرورگر. اگر viewport برابر با 50cm پهنا داشته باشد، 1vm برابر با 0.5cm است.


منابع آموزشی