آموزش اندازه و سایزها در css - رایگان

کدهای این بخش را از اینجا دانلود کنید.

واحدهای اندازه‌گیری در CSS

هنگامی که می‌خواهیم اندازه یک عنصر را مشخص کنیم مثل طول، عرض یا عمق باید از واحدهای اندازه‌گیری استفاده کنیم. مشابه دنیای واقعی:

مانیتور: عرض ۲۹ اینچ → واحد اندازه‌گیری: اینچ
ضخامت گوشی: ۸ میلی‌متر → واحد اندازه‌گیری: میلی‌متر

در وب نیز به همین صورت است. وقتی می‌خواهیم به یک تصویر، فونت یا هر المان دیگری اندازه بدهیم، باید از واحدهای اندازه‌گیری استفاده کنیم.

دسته‌بندی واحدها

واحدهای اندازه‌گیری در CSS به دو دسته تقسیم می‌شوند:

1. واحدهای مطلق (Absolute): اندازه‌ها مشخص و ثابت هستند.
2. واحدهای نسبی (Relative): اندازه‌ها نسبت به یک مبنای مشخص تعیین می‌شوند، نه مقدار مطلق.

اعمال واحدهای اندازه‌گیری در VS Code

برای درک بهتر، مثال‌ها را وارد محیط VS Code می‌کنیم.

فایل CSS که از قبل تعریف کرده‌اید را در VS Code باز کنید.
این فایل‌ها را می‌توانید به عنوان ضمیمه یا لینک در پروژه داشته باشید تا راحت‌تر مشاهده و ویرایش شوند.

کامنت‌ها با فرمت زیر نوشته می‌شوند:
هر چیزی که داخل /* ... */ قرار گیرد، توسط مرورگر خوانده نمی‌شود و فقط برای توضیحات یا یادداشت برای برنامه‌نویس استفاده می‌شود. در VS Code، کامنت‌ها معمولاً با رنگ سبز نمایش داده می‌شوند تا از کدهای اجرایی متمایز شوند.
نکته: استفاده از کامنت‌ها باعث می‌شود که کد شما خواناتر و قابل فهم‌تر باشد، مخصوصاً در پروژه‌های بزرگ و طولانی.

واحدهای مطلق (Absolute Units)

در CSS، واحدهای مطلق (Absolute Units) به اندازه‌هایی گفته می‌شوند که ثابت و مستقل از والد یا صفحه هستند. نمونه‌های واحدهای مطلق:

سانتی‌متر (cm)
میلی‌متر (mm)
اینچ (in)
پیکسل (px)

ما در اینجا میخواهیم همه تگ‌های h1 را به اینچ تبدیل کنیم

h1 {
  font-size: 1in;    /* فونت یک اینچ */
}

<body>
    <h1>This is 1 in</h1>
</body>

و نتیجه:
نتیجه تغییر تگ‌های H1 به اینچ در CSS
فونت سایز این 1 اینچ است. حال اگر 1 اینچ را تبدیل به 1 سانتی متر کنیم، نتیجه میشود:

h1 {
  font-size: 1cm;
}

<body>
    <h1>This is 1 cm</h1>
</body>

نتیجه تغییر تگ‌های H1 به سانتی‌متر در CSS

در CSS، برخی واحدها مطلق (Absolute Units) هستند و اندازه آنها ثابت و مشخص است. نمونه‌هایی از این واحدها و نسبت‌های آنها عبارتند از:

1 اینچ = 2.54 سانتی‌متر
در استاندارد CSS: 96 پیکسل = 1 اینچ
72 پوینت = 1 اینچ
1 پیکسل = 1.96 اینچ
1 پوینت = 1.72 اینچ

h2 {
  font-size: 5cm;
}

نتیجه تغییر تگ‌های H1 به سانتی‌متر در CSS

p {
  font-size: 14px;
}

واحدهای نسبی (Relative Units)

نمونه مهم em: فونت سایز المنت قبلی را بررسی می‌کند
در مرحله اول این نوشتار را وارد میکنیم.

<body>
    <p>This is 2em</p>
</body>

حال به عقب برمیگردیم

<body>
    <p style="font-size: 2em;">This is 2em</p>
</body>

فونت سایز این قسمت دو برابر چیزی است که از قبل تعریف شده.

نکته مهم: اگر برای یک عنصر هم Inline Style و هم Internal CSS یا External CSS تعریف شده باشد Inline Style ارجحیت بیشتری دارد و اولویت بالاتری دارد.

بررسی تفاوت em و rem در اندازه فونت

فرض کنید ساختار HTML ما به شکل زیر است:

</div>
   <p>This is 2em</p>
   <p>This is 2rem</p>
</div>

برای هرکدام فونت سایز مشخص می‌کنیم

<div>
  <p style="font-size: 2em;">This is 2em</p>
  <p style="font-size: 2rem;">This is 2rem</p>
</div>

و نتیجه:

در اینجا مرورگر به صورت پیش‌فرض برای تگ <p> فونت سایز ۱۶px در نظر می‌گیرد. اما اگر در اینجا از تگ <div> استفاده کنیم و اندازه آن را 20px بذاریم:

div {
  font-size: 20px;
}

نتیجه می‌شود:

جمله اول در تگ <p> قرار دارد و جمله دوم و سوم در تگ <div> هستند.

جمله دوم بزرگ‌تر می‌شود چون em مقدار قبلی را در نظر می‌گیرد. یعنی اینجا که فونت‌سایز div برابر ۲۰ پیکسل است، وقتی می‌نویسیم 2em، می‌شود:

<p style="font-size: 2em;">This is 2em (20px * 2 = 40px)</p>

اما rem همیشه مقدار پیش‌فرض مرورگر را چک می‌کند. مقدار پیش‌فرض مرورگر هم معمولاً ۱۶ پیکسل هست. اما اگر ما بیایم و فونت سایز مرورگر را تغییر دهیم:

html {
  font-size: 20px;
}

نتیجه:

و اگر فونت سایز را به 40 تغییر بدیم نتیجه می‍شود:

بیایم بررسی کنیم که چرا سایز فونت‌ها متفاوت هست:

وقتی در CSS می‌نویسیم 2rem، منظور این است که اندازه‌ی مورد نظر، دو برابر اندازه‌ی فونت تگ اصلی صفحه (html) باشد . در اینجا تگ html ریشه است، پس rem همیشه مقدارش را از همین تگ می‌گیرد:

<div>
  <p style="font-size: 2rem;">This is 2rem (HTML font-size: 40px) * 2 = 80px
</div>

وقتی در CSS می‌نویسیم 2em، منظور این است که اندازه‌ی مورد نظر، دو برابر اندازه‌ی فونت قبلی یعنی تگ <div> باشد.

<div>
  <p style="font-size: 2em;">This is 2em (div font-size = 20px * 2 = 40px)
</div>

بررسی واحد درصد (%) برای اندازه فونت در CSS

واحد درصد در CSS برای اندازه فونت نسبی به فونت والد (Parent) استفاده می‌شود.

<p style="font-size: 200%;">This is 200%</p>

می‌بینیم که نتیجه به دست آمده دوبرابر هست:

اگر پاراگراف داخل هیچ عنصری نباشد، والد پیش‌فرض مرورگر ریشه (html) است. فونت پاراگراف دو برابر فونت ریشه نمایش داده می‌شود.

حالا همین کا را داخل تگ <di> انجام می‌دهیم

<div>
    <p style="font-size: 200%;">This is 200% of the parent.</p>
</div>

نتیجه می‌شود:
نتیجه واحد درصد برای فونت در تگ div در CSS

استفاده از واحدهای ویوپورت برای اندازه فونت

واحدهای ویوپورت اندازه عناصر را نسبت به ابعاد صفحه نمایش تعیین می‌کنند:

vh → یک درصد از ارتفاع ویوپورت
vw → یک درصد از عرض ویوپورت
vmin → کمترین مقدار بین عرض و ارتفاع
vmax → بیشترین مقدار بین عرض و ارتفاع

مثال فونت با واحد vh

<p style="font-size: 20vh;">This is 20vh</p>

بعد از ذخیره نتیجه می‌شود:

اندازه این فونت سایز میشود %20 از ارتفاع یعنی فونت با تغییر ارتفاع پنجره تغییر می‌کند.

مثال فونت با واحد vw

<p style="font-size: 20vw;">This is 20vw</p>

فونت نسبت به عرض پنجره تغییر می‌کند و برای طراحی متن‌هایی که باید با عرض صفحه مقیاس‌دهی شوند، مناسب است.

نحوه محاسبه

فرض کنید می‌خواهیم اندازه فونت را نسبت به عرض صفحه (viewport width) تعیین کنیم

اگر عرض صفحه 1920px باشد: 1920 × 20% = 384px
اگر عرض صفحه 800px باشد: 800 × 20% = 160px

اندازه و سایزها - Unit & Sizing