سبد (0)

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

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

در CSS واحدهای اندازه گیری زیادی برای بیان طول یا اندازه وجود دارد.

خصوصیت هایی مانند width و margin و padding و font-size و border-width و ... اندازه یا طول می گیرند.

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

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

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

دو نوع واحد اندازه گیری وجود دارد: 1- نسبی یا Relative و 2- مطلق یا Absolute


پشتیبانی مرورگرهای مختلف از واحدهای اندازه گیری

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

واحد اندازه گیری     
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 پشتیبانی نمی شود 20.0

توجه: مرورگر IE9 واحد vmin را با نام غیراستاندارد vm می شناسد.


1- واحد های اندازه گیری نسبی یا Relative

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

در بین رسانه های مختلف، استفاده از واحد های اندازه گیری نسبی نتیجه بهتری بهمراه خواهد داشت.

واحدتوضیحات
em طول، نسبت به اندازه font-size عنصر محاسبه می شود. 2em یعنی دو برابر سایز فونت فعلی. برای مثال اگر عنصری با فونت 12pt نمایش داده می شود، آنگاه '2em' معادل 24pt است. em یکی از واحدهای بسیار مفید در CSS است، چون می تواند به صورت اتوماتیک با فونتی که کاربر خواننده استفاده می کند، منطبق شود. خودتان امتحان کنید
ex طول، نسبت به x-height فونت جاری محاسبه می شود. (بندرت استفاده می شود) خودتان امتحان کنید
ch طول، نسبت به عرض "0" محاسبه می شود.
rem طول، نسبت به اندازه font-size عنصری که در root یا ریشه قرار دارد محاسبه می شود.
vw طول، نسبت به 1 درصد از عرض viewport یا دید محاسبه می شود.
vh طول، نسبت به 1 درصد از ارتفاع viewport یا دید محاسبه می شود.
vmin طول، نسبت به 1 درصد از کوچکترین اندازه viewport یا دید محاسبه می شود.
vmax طول، نسبت به 1 درصد از بزرگترین اندازه viewport یا دید محاسبه می شود.
%  
px پیکسل (1px = 1/96th of 1in) خودتان امتحان کنید
Note نکته: واحدهای اندازه گیری em و rem برای صفحه بندی های مقیاس پذیر، بسیاد کاربردی اند.

2- واحدهای اندازه گیری مطلق

واحدهای اندازه گیری مطلق ثابت اند و طول یا اندازه ای که با یکی از این واحدها بیان شود، دقیقاً به همان اندازه، ظاهر خواهد شد.

بدلیل وجود صفحات نمایش با اندازه های مختلف، پیشنهاد می شود که از این واحدهای اندازه گیری استفاده نکنید. اما اگر می دانید اندازه صفحه نمایش ثابت است (مانند پرینت) می توانید از آن استفاده نمایید.

واحدتوضیحات
cm سانتی متر خودتان امتحان کنید
mm میلی متر خودتان امتحان کنید
in اینچ (1in = 96px = 2.54cm) خودتان امتحان کنید
pt پوینت یا نقطه (1pt = 1/72 of 1in) خودتان امتحان کنید
pc پیکا (1pc = 12 pt) خودتان امتحان کنید
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه