واحدهای CSS

واحدهای CSS

CSS چندین واحد مختلف برای نمایش مقیاس دارد.

بسیاری از ویژگی‌های CSS می‌توانند widthوmarginوpaddingوfont-size و.

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

مثال

با استفاده از px (پیکسل) اندازه‌های مختلف طول را تنظیم کنید:

h1 {
  font-size: 60px;
}
p {
  font-size: 25px;
  line-height: 50px;
}

آموزش عملی

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

برای برخی از ویژگی‌های CSS، استفاده از اندازه منفی مجاز است.

واحدهای طول دو نوع دارند:واحدهای مطلقوواحدهای نسبی.

طول مطلق

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

نمی‌توان واحدهای طول مطلق را در صفحه نمایش استفاده کرد زیرا اندازه صفحه نمایش تغییرات زیادی دارد. اما اگر میدانید که دستگاه خروجی چیست، می‌توانید از آنها استفاده کنید، به عنوان مثال برای قالب‌بندی چاپ (print layout).

واحد توضیح TIY
cm سانتی‌متر آموزش عملی
mm میلی‌متر آموزش عملی
in اینچ (1in = 96px = 2.54cm) آموزش عملی
px * پیکسل (1px = 1/96 از 1in) آموزش عملی
pt نقطه (1pt = 1/72 از 1in) آموزش عملی
pc پایکا (1pc = 12 pt) آموزش عملی

* پیکسل (px) نسبت به دستگاه مشاهده است. برای دستگاه‌های dpi پایین، 1px معادل یک پیکسل دستگاه (نقطه) است. برای چاپگرها و صفحه‌نمایش‌های با رزولوشن بالا، 1px معادل چندین پیکسل دستگاه است.

طول نسبی

واحدهای طول نسبی مقیاس طول را نسبت به یک طول دیگر تعیین می‌کنند. واحدهای طول نسبی در بین رسانه‌های مختلف رندر بهتر تغییر می‌کنند.

واحد توضیح TIY
em مقیاس اندازه فونت (font-size) نسبت به عنصر (2em معادل دو برابر اندازه فعلی فونت است) آموزش عملی
ex مقایسه با x-height فعلی فونت (استفاده کم) آموزش عملی
ch مقایسه با "0" (صفر) آموزش عملی
rem مقیاس اندازه فونت (font-size) نسبت به عنصر ریشه آموزش عملی
vw 1% از عرض نمای دیدارکننده* آموزش عملی
vh 1% از ارتفاع نمای دیدارکننده* آموزش عملی
vmin 1% کوچکتر از اندازه کوچکتر نمای دیدارکننده* آموزش عملی
vmax 1% بزرگتر از اندازه بزرگتر نمای دیدارکننده* آموزش عملی
% مقایسه با عنصر والد آموزش عملی

توضیح:واحدهای em و rem برای ایجاد قالب‌های قابل انعطاف ایده‌آل قابل استفاده هستند!

* نمای دیدارکننده (Viewport) = اندازه پنجره مرورگر. اگر عرض نمای دیدارکننده 50 باشد، پس 1vw = 0.5cm.

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی هستند که این مقیاس طول را کاملاً پشتیبانی می‌کنند.

مقیاس طول
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 12.0 19.0 6.0 20.0
vmax 26.0 16.0 19.0 7.0 20.0