آموزش واحدها یا Unit در CSS

برای بیان طول در CSS واحدهای مختلفی وجود دارد. بسیاری از ویژگی های CSS مانند width و margin و padding و font-size و غیره یک مقدار طول(length) دارند. طول(length) یک عدد است که پس از آن یک واحد(unit) قرار می گیرد، مانند 10px یا 2em یا غیره.

h1 {
  font-size: 60px;
}

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

نکته: نمی توانیم بین یک عدد و واحد آن، یک فاصله ی سفید قرار دهیم. اما اگر مقدار ما 0 است، می توانیم واحد را از قلم بیاندازیم.

برای برخی از ویژگی های CSS می توانیم از مقادیر منفی نیز استفاده کنیم.

دو نوع واحد طول(length unit) داریم: مطلق(absolute) و نسبی(relative).

 مقادیر مطلق(Absolute)

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

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

طول ها یا مقادیر نسبی(Relative)

واحدهای طول نسبی، یک طول را نسبت به یک ویژگی طول دیگر(another length property) مشخص می کند. واحدهای طول نسبی بین رسانه های رندر(rendering mediums) مختلف، مقیاس بهتری دارند.

 نکته: واحدهای em و rem در ایجاد چینش های کاملاً مقیاس پذیر قابل استفاده هستند. 

* : به سایز پنجره ی مرورگر، Viewport گفته می شود. اگر عرض Viewport برابر با 50cm باشد، آنگاه 1vw = 0.5cm خواهد بود.

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

اعداد درون جدول زیر، اولین ورژن مرورگری را مشخص می کنند که کاملاً از واحد طول مذکور پشتیبانی می کند.

					واحد طول
1.0	3.0	1.0	3.5	1.0	em, ex, %, px, cm, mm, in, pt, pc
27.0	9.0	1.0	20.0	7.0	ch
4.0	9.0	3.6	11.6	4.1	rem
20.0	9.0	19.0	20.0	6.0	vh, vw
20.0	12.0	19.0	20.0	6.0	vmin
26.0	16.0	19.0	20.0	7.0	vmax