Back to Top


1397/02/18 - 12:20

واحدهای اندازه گیری CSS

برای اندازه گیری عرض و ارتقاع، فاصله از کناره ها، اندازه فونت و سایر موارد در CSS نیازمند واحد های اندازه گیری هستیم. در این مقاله این واحدها معرفی می شوند

کلمات کلیدی

واحدcsslengthunits

واحدهای اندازه گیری CSS

واحدهای CSS

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

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

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

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

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

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

طول های مطلق

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

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

واحد

شرح

cm

سانتی متر

mm

میلی متر

In

اینچ (1in = 96px = 2.54cm)

px*

پیکسل (1px = 1/96 of 1in)

pt

پوینت (1pt = 1/72 of 1in)

pc

پیکاس (1pc = 12pt)

 

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

طول های نسبی

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

Em

نسبت به سایز فونت عنصر (2em یعنی برابر اندازه فونت جاری)

Ex

نسبت به x-height فونت جاری (به ندرت استفاده می شود)

Ch

نسبت به width "0" (صفر)

Rem

نسبت به اندازه فونت عنصر ریشه

Vw

نسبت به 1% عرض viewport*

Vh

نسبت به 1% ارتفاع viewport*

Vmin

نسبت به 1% بعد کوتاه تر viewport*

Vmax

نسبت به 1% بعد بلندتر viewport*

%

نسبت به عنصر والد

 

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

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

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

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

واحد طولی

em, ex, %, px, cm, mm, in, pt, pc

1.0

3.0

1.0

1.0

3.5

ch

27.0

9.0

1.0

7.0

20.0

rem

4.0

9.0

3.6

4.1

11.6

vh, vw

20.0

9.0

19.0

6.0

20.0

vmin

20.0

9.0*

19.0

6.0

20.0

vmax

26.0

پشتیبانی نمی شود

19.0

7.0

20.0

 

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

 

منبع: www.w3schools.com