مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. واحدها در CSS یکی از بخش های اصلی آن محسوب می شود چراکه در اغلب کدهای CSS از جمله تعیین عرض و ارتفاع عناصر، فضای داخلی و خارجی عناصر، ضخامت border عناصر، اندازه فونت و… کاربرد دارند، تاکنون با برخی از واحدها در طول بخش های قبلی از جمله پیکسل (px) آشنا شدیم، علاوه بر آن CSS شامل واحدهای دیگری از جمله سانتی متر (cm) ، میلی متر (mm) و… نیز می شود که در مواقع خاصی کاربرد دارند، برای آشنایی بیشتر با این واحدها و سایر واحدهای اندازه گیری در CSS در ادامه این بخش با ما همراه باشید.
واحدها در CSS
در ادامه این بخش ما شما را با انواع مختلف واحدها در CSS و کاربردهای هر یک آشنا خواهیم کرد.
آشنایی با واحدهای اندازه گیری در CSS
CSS دارای چند واحد مختلف برای بیان طول است.
تعداد زیادی از خصوصیات CSS دارای مقادیر طول هستند که از جمله می توان به width, margin, padding, font-size, border-width و… اشاره کرد.
طول هر خصوصیت به صورت یک عدد به همراه واحد اندازه گیری مورد نظر می آیذ. (مانند : ۱۰px, 2em و…).
فضای های خالی بین عدد و واحد نمایش داده نمی شود، با این حال اگر عدد ۰ باشد، می توان واحد را حذف کرد.
برای برخی از خواص CSS، طول منفی مجاز است.
دو نوع طول واحد : absolute و relative وجود دارد.
طول های absolute
واحد های absolute ثابت هستند و طول بیان شده در هر یک از این ها دقیقا همان اندازه ظاهر می شود.
واحد های مطلق برای استفاده در صفحه توصیه نمی شود، زیرا اندازه صفحه نمایش ها بسیار متفاوت است.
با این حال، می توان آنها را در صورت استفاده از رسانه های خروجی (مانند چاپگر) مورد استفاده قرار داد.
| واحد | توضیحات |
|---|
| cm | centimeters |
| mm | millimeters |
| in | (inches (1in = 96px = 2.54cm |
| px * | (pixels (1px = 1/96th of 1in |
| pt | (points (1pt = 1/72 of 1in |
| pc | (picas (1pc = 12 pt |
به عنوان مثال واحد cm
مثال : واحد cm
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html> <head> <style> h1 {font-size: 1.5cm;} h2 {font-size: 1cm;} p { font-size: 0.5cm; line-height: 1cm; } </style> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html> |
پیکسل به نسبت صفحه نمایش دستگاه نمایش داده می شود، به عنوان مثال ۱px یک پیکسل (نقطه) از صفحه نمایش است.
طول های Relative
واحدهای Relative نسبت به واحدهای عناصر والد خود تعیین می شوند.
این واحدها به علت انعطاف پذیری در دستگاه های مختلف بهتر رندر می شوند.
| Unit | Description |
|---|
| em | نسبت به font-size عنصر والد خود تعیین می شود (۲em یعنی دوبرابر font-size عنصر والد ) |
| ex | نسبت به ارتفاع x فونت کنونی (به ندرت استفاده می شود) |
| ch | نسبت به عرض “۰” (صفر) |
| rem | نسبت به اندازه فونت عنصر ریشه |
| vw | نسبت به ۱٪ عرض viewport* |
| vh | نسبت به ۱٪ ارتفاع viewport* |
| vmin | نسبت به ۱٪ از ابعاد کوچک تر از viewport |
| vmax | نسبت به ۱٪ از ابعاد بزرگ تر از viewport |
| % | نسبت به عنصر والد |
پشتیبانی در مرورگرها
اعداد داخل جدول اولین نسخه ی مرورگری که از واحدهای مشخص شده پشتیبانی می کند را نشان می دهد:
| Length Unit | Chrome | Internet Explorer | Firefox | Safari | Opera |
|---|
| em, ex, %, px, cm, mm, in, pt, pc | ۱٫۰ | ۳٫۰ | ۱٫۰ | ۱٫۰ | ۳٫۵ |
| ch | ۲۷٫۰ | ۹٫۰ | ۱٫۰ | ۷٫۰ | ۲۰٫۰ |
| rem | ۴٫۰ | ۹٫۰ | ۳٫۶ | ۴٫۱ | ۱۱٫۶ |
| vh, vw | ۲۰٫۰ | ۹٫۰ | ۱۹٫۰ | ۶٫۰ | ۲۰٫۰ |
| vmin | ۲۰٫۰ | ۹٫۰* | ۱۹٫۰ | ۶٫۰ | ۲۰٫۰ |
| vmax | ۲۶٫۰ | Not supported | ۱۹٫۰ | ۷٫۰ | ۲۰٫۰ |
توجه : اینترنت اکسپلورر ۹ از vmin با نام غیر استاندارد: vm پشتیبانی می کند.
کلام آخر
در طراحی وب سایت ها و تعیین واحدهای اندازه گیری در CSS یکی از بخش های مهم وب سایت است، چرا که اندازه ی واحدها در Responsive کردن صفحه وب از نکات مهم و تاثیر گذار در خوانایی محتوا است.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
