هنگامی که می‌خواهیم اندازه یک عنصر را مشخص کنیم مثل طول، عرض یا عمق باید از واحدهای اندازه‌گیری استفاده کنیم. مشابه دنیای واقعی:
- مانیتور: عرض ۲۹ اینچ ← واحد اندازه‌گیری: اینچ
- ضخامت گوشی: ۸ میلی‌متر ← واحد اندازه‌گیری: میلی‌متر
در وب نیز به همین صورت است. وقتی می‌خواهیم به یک تصویر، فونت یا هر المان دیگری اندازه بدهیم، باید از واحدهای اندازه‌گیری در CSS استفاده کنیم. بنابراین در این قسمت از دوره آموزش CSS ، واحدهای اندازه گیری در CSS را یاد می‌گیرید.
دسته‌بندی واحدهای اندازه گیری در CSS
واحدهای اندازه‌گیری در CSS به دو دسته تقسیم می‌شوند:
- واحدهای مطلق (Absolute): اندازه‌ها مشخص و ثابت هستند.
- واحدهای نسبی (Relative): اندازه‌ها نسبت به یک مبنای مشخص تعیین می‌شوند، نه مقدار مطلق.
در این آموزش، برای درک بهتر، مثال‌ها را وارد محیط VS Code می‌کنیم:
- فایل CSS که از قبل تعریف کرده‌اید را در VS Code باز کنید.
- این فایل‌ها را می‌توانید به عنوان ضمیمه یا لینک در پروژه داشته باشید تا راحت‌تر مشاهده و ویرایش شوند.
واحدهای اندازه‌گیری مطلق در CSS
در CSS، برخی واحدها مطلق (Absolute Units) هستند و اندازه آنها ثابت، مشخص و مستقل از والد یا صفحه است. نمونه‌هایی از این واحدهای مطلق عبارتند از:
- سانتی‌متر (cm)
- میلی‌متر (mm)
- اینچ (in)
- پیکسل (px)
واحد اندازه‌گیری اینچ (in):
ما در اینجا می‌خواهیم همه تگ‌های h1 را به اینچ تبدیل کنیم:
h1 {
font-size: 1in; /* فونت یک اینچ */
}<body>
<h1>This is 1 in</h1>
</body> و نتیجه:
نسبت‌های واحدها مطلق (Absolute Units) عبارت است از:
1 in = 2.54 cm
1 in = 96 px
1 in = 72 pt واحد اندازه‌گیری سانتی متر (cmm):
همه تگ‌های h2 را به سانتی‌متر تبدیل کنیم:
<body>
<h1>This is 1 in</h1>
<h2>This is 5 cm</h2>
</body>h2 {
font-size: 5cm;
}
واحد اندازه‌گیری پیکسل (px):
همه تگ‌های p را به پیکسل تبدیل کنیم:
<body>
<h1>This is 1 in</h1>
<h2>This is 5 cm</h2>
<p>This is 14px</p>
</body>p {
font-size: 14px;
}
واحدهای اندازه‌گیری نسبی در CSS
در CSS، واحدهای نسبی (Absolute Units) به اندازه‌هایی گفته می‌شوند که نسبت به یک مبنای مشخص تعیین می‌شوند.
واحد em:
واحد اندازه‌گیری em فونت سایز المنت قبلی را بررسی می‌کند!
در مرحله اول این نوشتار را وارد می‌کنیم:
<body>
<h1>This is 1 in</h1>
<h2>This is 5 cm</h2>
<p>This is 16px</p>
<p style="font-size: 2em;">This is 2em</p>
</body>فونت سایز این قسمت دو برابر چیزی است که از قبل تعریف شده است (دو برابر 16px).
👈 نکته مهم: اگر برای یک عنصر هم Inline Style و هم Internal CSS تعریف شده باشد Inline Style ارجحیت بیشتری دارد و اولویت بالاتری دارد.
واحد اندازه‌گیری rem و بررسی تفاوت em و rem
یکی دیگر از واحدهای اندازه‌گیری rem است که گاهی تشخیص تفاوت آن با em سخت است. در اینجا تفاوت em و rem را به خوبی بررسی می کنیم.
فرض کنید ساختار HTML ما به شکل زیر است:
</div>
<p>This is 2em</p>
<p>This is 2rem</p>
</div>برای هرکدام فونت سایز مشخص می‌کنیم، یکی بر اساس واحد اندازه‌گیزی em و دیگری rem:
<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 تغییر دهیم و برابر ۲۰ پیکسل بگذاریم، هر سه یک سایز می‌شوند:
html {
font-size: 20px;
}نتیجه:
و اگر فونت سایز تگ HTML را به 40 تغییر بدیم نتیجه میشود:
بیایم بررسی کنیم که چرا سایز فونت‌ها متفاوت هست:
وقتی در CSS می‌نویسیم 2rem، منظور این است که اندازه‌ی مورد نظر، دو برابر اندازه‌ی فونت تگ اصلی صفحه (html) باشد . در اینجا تگ html ریشه (root) است، پس 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) است. فونت پاراگراف دو برابر فونت ریشه نمایش داده میشود.
حالا همین کار را داخل تگ <div> انجام می‌دهیم:
<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
جمع بندی
فونت سایزها در CSS یا به صورت مطلق (Absolute) هستند که در این حالت اندازه آنها را به طور قطعی و با یکی از واحدهای اندازه‌گیری مثل اینچ، پیکسل یا سانتی‌متر مشخص می‌کنیم. یا به صورت نسبی (Relative) هستند که در این حالت اندازه‌ی آنها را نسبت به یک مرجعی (به عنوان مثال تگ parent یا تگ root) مشخص می‌کنیم. در ادامه‌ی قسمت‌های این دوره‌ی آموزشی از مابقی واحدهای اندازه‌گیری استفاده خواهیم کرد و چگونگی استفاده از آنها را به صورت عملی خواهید دید.