در CSS، واحدهای سایز به دو دسته/خانواده اصلی تقسیم میشوند:
- واحدهای ثابت/Absolute
- واحدها متغیر/Relative
واحدهای ثابت (Absolute units)
واحدهای ثابت/مطلق به صورت خشک تعریف شدهاند و سایز مشخصشده با این واحدها دقیقاً همان اندازه نمایش داده میشود. این واحدها نسبت به اندازه صفحه، جهت یا سایر تغییرات واکنش نشان نمیدهند.
واحدهای ثابت برای استفاده در انواع نمایشگرها توصیه نمیشوند، چراکه اندازه صفحه نمایشها متفاوت است؛ اما در صورتی که محیط خروجی مشخص باشد (مانند Printer)، این واحدها میتوانند مفید باشند.
انواع واحدهای ثابت:
cm
(سانتیمتر)mm
(میلیمتر)in
(اینچ)px
(پیکسل)pt
(پوینت)pc
(پیکا)q
(یک چهارم میلیمتر)
مثال:
/* یک باکس با عرض 2 سانتیمتر */ .box { width: 2cm; height: 2cm; background-color: lightblue; } /* متن با اندازه فونت ثابت 12 پوینت */ .text { font-size: 12pt; }
واحدهای متغیر (Relative units)
واحدهای متغیر/مقیاس پذیر سایز را بصورت خودکار و نسبت به ویژگیهای دیگر مانند اندازه صفحه نمایش، اندازه صفحه مرورگر، عناصر والد/parent و... تنظیم میکنند. این واحدها در بین انواع دستگاه های مختلف بهتر scale و تنظیم میشوند.
انواع واحد های متغیر:
em
: نسبت به اندازه فونت عنصر والد تنظیم میشودex
: نسبت به ارتفاعx
در فونت جاری، که برای فونتهای تکفاصله مفید است تنظیم میشودch
: نسبت به عرض کاراکتر "0" در فونت عنصر، برای فونتهای تکفاصله کاربرد داردrem
: نسبت به اندازه فونت عنصر ریشه (<html>
)vw
: نسبت به ۱٪ از عرض پنجره مرورگرvh
: نسبت به ۱٪ از ارتفاع پنجره مرورگرvmin
: نسبت به ۱٪ از کوچکترین بُعد پنجره مرورگرvmax
: نسبت به ۱٪ از بزرگترین بُعد پنجره مرورگر%
: نسبت به عنصر والد تنظیم میشود
توضیحات تکمیلی واحدهای مهم
-
px (پیکسل) - ثابت
- پیکسل یک مربع کوچک روی نمایشگر است که میتواند فقط یک رنگ را در یک لحظه نمایش دهد. مانند عدد رزولوشن نمایشگر که نشاندهنده تعداد پیکسلهای تشکیلدهنده صفحه است. 1024x768
font-size: 12px;
به مرورگر میگوید که ارتفاع هر کاراکتر ۱۲ عدد پیکسل باشد. پیکسلها اندازه ثابتی دارند و تغییر اندازه نمیدهند. این واحد برای مواقعی که نیاز به قرار دادن متن روی یک تصویر پسزمینه دارید، مفید است.
-
% (درصد) - متغیر
- درصد یک واحد متغیر است که بر اساس اندازه عنصر والد محاسبه میشود. برای تعیین عرض یا ارتفاع عناصر، زمانی که والد مشخص باشد، میتواند به عنوان راهی منعطف استفاده شود.
font-size: 50%;
اندازه فونت را به ۵۰٪ اندازه فونت عنصر والد تنظیم میکند.font-size: 100%;
یعنی ۱۰۰٪ اندازهای که از عنصر والد به ارث میبرد. درصد برای طراحیهای انعطافپذیر مناسبتر است.- در CSS، هر چیزی که از این واحد استفاده کند، نسبت به عنصر والد خود است، مگر در حالتی که موقعیت عنصر ثابت باشد که در آن صورت نسبت به عنصر ریشه
<html>
خواهد بود. - نکته: تعیین
width
یاheight
به درصد زمانی عمل نمیکند که ابعاد عنصر والد بهطورauto
تعیین شده باشد.
-
pt (پوینت) - ثابت
- ۱ پوینت برابر با ۱/۷۲ اینچ است.
font-size: 12pt;
ارتفاع کاراکترها را به ۱۲/۷۲ اینچ تنظیم میکند. پوینت اندازهای ثابت دارد و مقیاسپذیر نیست! - پوینت در طراحی Print استفاده میشود و تنها در CSS مربوط به
@media print
کاربرد دارد.
- ۱ پوینت برابر با ۱/۷۲ اینچ است.
-
em - متغیر
- این واحد شبیه به درصد است و نسبت به اندازه فونت عنصر والد محاسبه میشود. اما ۱em برابر با ۱۰۰٪ و ۱.۵em برابر با ۱۵۰٪ است.
em
یک واحد مقیاسپذیر است و برای تعیین اندازه فونت مناسب اما چالشی است. - یک
em
برابر با اندازه فونت جاری است، به عنوان مثال اگر اندازه فونت کل صفحه ۱۲pt باشد، ۱em برابر با ۱۲pt خواهد بود. این واحد مقیاسپذیر است؛ بنابراین ۲em برابر با ۲۴pt، ۰.۵em برابر با ۶pt خواهد بود.
- این واحد شبیه به درصد است و نسبت به اندازه فونت عنصر والد محاسبه میشود. اما ۱em برابر با ۱۰۰٪ و ۱.۵em برابر با ۱۵۰٪ است.
-
rem - متغیر
-
واحد rem هم مانند em مقیاسپذیر است اما همیشه نسبت به اندازه فونت عنصر ریشه
<html>
محاسبه میشود، که باعث میشود از تغییرات ناخواسته در طراحی جلوگیری کند. بنابراین با استفاده از عناصر تودرتو دیگر نیازی به محاسبه اندازه فونت در رابطه با عنصر والد نیست. برای تعیین اندازه فونت مناسب است.
-
واحد rem هم مانند em مقیاسپذیر است اما همیشه نسبت به اندازه فونت عنصر ریشه
-
cm، mm، in - ثابت
-
معمولاً برای اندازهگیریهای دقیق در محیطهای غیر دیجیتال و فیزیکی مانند Print به کار میروند. اندازه فونت با تغییر اندازه پنجره مرورگر به صورت دینامیک واکنش نشان نمیدهد، بلکه به تنظیمات زوم یا اندازه متن مرورگر، مانند فشار دادن همزمان کلید
Ctrl
و+
در مرورگر، واکنش نشان میدهد.
-
معمولاً برای اندازهگیریهای دقیق در محیطهای غیر دیجیتال و فیزیکی مانند Print به کار میروند. اندازه فونت با تغییر اندازه پنجره مرورگر به صورت دینامیک واکنش نشان نمیدهد، بلکه به تنظیمات زوم یا اندازه متن مرورگر، مانند فشار دادن همزمان کلید
-
vm. vh. viewport... - متغیر
- واحدهای vw و vh نسبت به عرض و ارتفاع صفحه نمایش تعریف میشوند. درواقع درصدی از پنجره مرورگر را نشان میدهند و برای طرحهای واکنشگرا کاربرد دارند. 1vw معادل ۱٪ از عرض صفحه نمایش و 1vh معادل ۱٪ از ارتفاع صفحه نمایش است. این واحدها به خصوص برای طراحیهای تمامصفحه بسیار مفیدند.
مثال:
/* با عرض برابر با 50% از عرض پنجره مرورگر */ .box { width: 50vw; height: 50vh; background-color: lightcoral; }
کاربرد واحدها در عناصر وب
-
px
(پیکسل): برای اندازه خطوط مرزی و اجزای کوچک ثابت.- کاربرد:
<button>
,<small>
, خطوط و حاشیهها.
- کاربرد:
-
%
(درصد): برای تنظیم ابعاد نسبی نسبت به عنصر والد، به ویژه در عرض و ارتفاع.- کاربرد:
<div>
,<img>
,<section>
,<header>
,<footer>
.
- کاربرد:
-
em
: برای تنظیم اندازه فونت و فاصلههای داخلی، با توجه به اندازه فونت والد.- کاربرد:
<p>
,<span>
,<ul>
,<ol>
.
- کاربرد:
-
rem
: برای اندازه فونت اصلی در کل صفحه و مقیاسپذیری یکنواخت، بدون تاثیر از والد.- کاربرد:
<body>
,<h1>
,<h2>
,<h3>
,<html>
.
- کاربرد:
-
vw
وvh
: برای تنظیم ابعاد نسبی کل صفحه نمایش، به خصوص در طراحیهای تمام صفحه.- کاربرد:
<section>
,<header>
,<footer>
, عناصر تمام صفحه.
- کاربرد:
-
pt
: برای فونت در خروجی چاپ (به ندرت برای وب).- کاربرد: فقط در چاپ، مثل استایل تحت
@media print
.
- کاربرد: فقط در چاپ، مثل استایل تحت
-
cm
,mm
,in
: برای موارد خاص Print و اندازهگیری دقیق.- کاربرد: چاپ و طرحهای خاص، مثل استایلهای PDF و کارت ویزیت
توجه: در اکثر مرورگرها، اندازه پیشفرض فونت ۱۶px است.