واحدهای CSS

CSS برای مشخص کردن طول (length) چند واحد اندازه گیری مختلف دارد.

خیلی از ویژگی های CSS مقادیر طول میگیرند، مثل width، margin، padding، font-size، border-width و ...

طول عددی است که بعد از آن واحدی طول می آید مثل 10px، 2em، و ...

بین طول و واحد آن نباید فاصله بیفتد. البته، اگر مقدار 0 باشد می توانیم از نوشتن واحد صرف نظر کنیم.

برای برخی ویژگی های CSS، طول های منفی نیز مجاز هستند.

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

طول های مطلق

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

واحدهای طولی مطلق برای استفاده روی صفحات پیشنهاد نمی شوند چون سایز صفحات خیلی متفاوت هستند. البته، اگر روی یک اندازه متوسط برای همه سایزها به نتیجه رسیده باشیم می توانیم از واحد طولی مطلق هم استفاده کنیم. به طور مثال برای print اندازه A4 در همه جا یکسان است و فرقی نمی کند موبایل باشد یا دسکتاپ.

*) پیکسل (px) بسته به وسیله ای است که استفاده می شود.  برای وسایل با dpi پایین 1px معدل با یک پیکسل دستگاه (dot) برای صفحه نمایش است. برای پرینترها و صفحات با وضوح تصویر بالا 1px شامل چندین پیکسل دستگاه می شود.

طول های نسبی

واحدهای طولی نسبی طول را نسبت به ویژگی طولی دیگر مشخص می کنند. واحدهای طولی نسبی بین رسانه های رندرینگ مختلف بهتر عمل می کنند.

واحدهای Em و rem در ایجاد طرح(layout) کاملا مقیاس پذیر کاربردی هستند.

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

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

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

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

منبع: www.w3schools.com