سبد (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, pc1.03.01.01.03.5
ch27.09.01.07.020.0
rem4.09.03.64.111.6
vh, vw20.09.019.06.020.0
vmin20.09.0*19.06.020.0
vmax26.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مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامیپرداخت آنلاین -  بانک ملتمعرفی بیاموز در شبکه سهپرداخت آنلاین - بانک اقتصاد نوینپرداخت آنلاین - بانک سامان