تفاوت واحدهای px, pt, em, rem, %... در CSS
در 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 است.
اگر قبلا در بیان ثبت نام کرده اید لطفا ابتدا وارد شوید، در غیر این صورت می توانید ثبت نام کنید.