واحدهای اندازه گیری در 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) خودتان امتحان کنید |
 |
نکته: واحدهای اندازه گیری em و rem برای صفحه بندی های مقیاس پذیر، بسیاد کاربردی اند. |
|---|
2- واحدهای اندازه گیری مطلق
واحدهای اندازه گیری مطلق ثابت اند و طول یا اندازه ای که با یکی از این واحدها بیان شود، دقیقاً به همان اندازه، ظاهر خواهد شد.
بدلیل وجود صفحات نمایش با اندازه های مختلف، پیشنهاد می شود که از این واحدهای اندازه گیری استفاده نکنید. اما اگر می دانید اندازه صفحه نمایش ثابت است (مانند پرینت) می توانید از آن استفاده نمایید.
| واحد | توضیحات |
|---|---|
| cm | سانتی متر خودتان امتحان کنید |
| mm | میلی متر خودتان امتحان کنید |
| in | اینچ (1in = 96px = 2.54cm) خودتان امتحان کنید |
| pt | پوینت یا نقطه (1pt = 1/72 of 1in) خودتان امتحان کنید |
| pc | پیکا (1pc = 12 pt) خودتان امتحان کنید |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 23050
دیدگاه‌ها
سلام واحد های اندازه گیری بیشتری وجود داره و شما همه رو ذکر نکردید.
مثلا واحد های اندازه گیری viewport رو ذکر نکردید(شامل vw , vm,vh است).
واحد عرض کاراکتر صفر رو هم ذکر نکردید که با علامت ch نمایش داده میشه.
واحد های بیشتری هم هستن...
اگه نویسنده خواستید بهم اطلاع بدید . من ۲ سال هست که در زمینه طراحی وب و ترجمه ی کتاب های زبان اصلی برنامه نویسی فعالیت دارم اگه منابع و اطلاعاتی خواستید با هم همکاری کنیم.
موفق باشید
سلام، ممنون اصلاح شد. اگر علاقه به کار کردن در زمنیه ی فتوشاپ یا جاوااسکریبت دارید، لطفاً با ایمیل [email protected] تماس بگیرید.