سیاساس/واحدها
| کامنتها | سیاساس | انتخابگر |
| سیاساس |
مقدمه
[ویرایش]در CSS برای تعیین اندازهٔ عناصر مختلف مانند طول، عرض، حاشیه، فاصلهها، اندازهٔ فونت و ... از «واحدهای اندازهگیری» استفاده میشود. دانستن تفاوت بین این واحدها به طراح کمک میکند که طراحی واکنشگرا، دقیق و سازگار با صفحهنمایشهای مختلف ایجاد کند.
واحدهای اندازهگیری در CSS به دو دستهٔ کلی تقسیم میشوند:
- واحدهای مطلق (Absolute units)
- واحدهای نسبی (Relative units)
واحدهای مطلق
[ویرایش]واحدهای مطلق همیشه اندازهٔ مشخص و ثابتی دارند و نسبت به صفحهنمایش یا عنصر والد تغییر نمیکنند. این واحدها معمولاً برای چاپ (Print) یا مواردی که اندازه باید دقیق باشد استفاده میشوند.
لیست واحدهای مطلق
[ویرایش]| واحد | توضیح | معادل تقریبی |
|---|---|---|
| px | پیکسل؛ رایجترین واحد در طراحی صفحات وب | 1px ≈ یک پیکسل در صفحهنمایش |
| pt | پوینت؛ معمولاً در چاپ استفاده میشود | 1pt = 1/72 اینچ |
| pc | پایکا؛ کمتر استفاده میشود | 1pc = 12pt |
| in | اینچ | 1in = 2.54cm = 96px |
| cm | سانتیمتر | 1cm ≈ 37.8px |
| mm | میلیمتر | 1mm ≈ 3.78px |
واحدهای نسبی
[ویرایش]واحدهای نسبی بر اساس اندازه یا ویژگیهای سایر عناصر (مثل عنصر والد، یا اندازهٔ فونت پایهٔ مرورگر) تعریف میشوند. این واحدها برای طراحی واکنشگرا (Responsive) بسیار مناسب هستند.
لیست واحدهای نسبی
[ویرایش]| واحد | توضیح |
|---|---|
| em | نسبت به اندازهٔ فونت عنصر والد (1em = اندازهٔ فونت جاری) |
| rem | نسبت به اندازهٔ فونت عنصر ریشه (html) |
| % | درصدی از ویژگی مرجع (مثلاً عرض والد) |
| vw | درصدی از عرض پنجرهٔ مرورگر (1vw = 1% از عرض ویوپورت) |
| vh | درصدی از ارتفاع پنجرهٔ مرورگر |
| vmin | کوچکتر از vw و vh |
| vmax | بزرگتر از vw و vh |
| ex | ارتفاع حرف "x" در فونت جاری |
| ch | عرض عدد صفر (0) در فونت جاری |
تفاوت بین px، em و rem
[ویرایش]برای درک بهتر تفاوت بین این سه واحد رایج، به مثال زیر توجه کنید:
html {
font-size: 16px;
}
.container {
font-size: 1.5em; /* برابر با 24px چون 1.5 * 16 */
}
.box1 {
width: 200px;
}
.box2 {
width: 10em; /* نسبت به font-size والد */
}
.box3 {
width: 10rem; /* نسبت به font-size عنصر html */
}
پیشنهاد برای استفاده
[ویرایش]- برای اندازه فونتها در طراحی واکنشگرا بهتر است از rem یا em استفاده شود.
- برای فاصلهها و ابعاد اغلب px یا % مناسب هستند.
- برای سازگاری بیشتر در صفحهنمایشهای مختلف از واحدهای vw/vh استفاده کنید.
نکات مهم
[ویرایش]- مرورگرهای مدرن به خوبی از همهٔ این واحدها پشتیبانی میکنند.
- استفاده ترکیبی از چند واحد (مثلاً calc(100% - 20px)) بسیار رایج است.
- تفاوت بین em و rem در ارجاع به عنصر والد یا ریشه است.
تمرین
[ویرایش]کدی بنویسید که یک div به اندازهٔ 50% عرض مرورگر داشته باشد و ارتفاع آن برابر با 30vh باشد. همچنین اندازهٔ فونت داخل آن با استفاده از واحد rem تنظیم شود.
کاربرد این صفحه از آموزش css
[ویرایش]درک دقیق تفاوت و کاربرد هر واحد اندازهگیری به شما کمک میکند که طراحیهای دقیق، زیبا و واکنشگرا بسازید. توصیه میشود همیشه به سازگاری در دستگاههای مختلف و وضوح صفحهنمایشها توجه داشته باشید.