واحدها (Units)
اینجا با «واحدهای CSS» آشنا می شوی. «واحد (Unit)» پسوند عدد است. مثلاً 16px یا 2rem. برخی «مطلق (Absolute)» هستند و اندازه ثابت دارند. برخی «نسبی (Relative)» هستند و با محیط تغییر می کنند؛ مثل اندازه فونت یا اندازه صفحه.
انواع واحدها در CSS
واحدهای مطلق مثل px، cm، mm، in، pt، pc ثابت اند. برای وب واکنش گرا مناسب نیستند؛ اما برای چاپ بد نیستند. واحدهای نسبی مثل em، rem، vw، vh، % وابسته به والد، ریشه یا پنجره مرورگرند و بهتر مقیاس می شوند.
اندازه فونت با px (واحد مطلق)
px کنترل کامل می دهد؛ اما واکنش گرایی را کم می کند. مرورگر هنوز می تواند کل صفحه را بزرگ نمایی کند.
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 16px;
}
نکته: بین عدد و واحد فاصله نگذار. برای مقدار 0 می توانی واحد را حذف کنی.
اندازه فونت با em (نسبت به والد)
em نسبت به اندازه فونت «والد» است. اگر والد 16px باشد، 2.5em می شود 40px. این روش با تنظیمات دسترسی کاربران بهتر هماهنگ می شود.
body {
font-size: 16px;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 1em;
}
اندازه فونت با rem (نسبت به ریشه)
rem نسبت به فونت «عنصر ریشه <html>» است. برخلاف em به والد بستگی ندارد. با تغییر یک باره اندازه ریشه، همه چیز منظم مقیاس می شود. مقدار پیش فرض اکثر مرورگرها 16px است.
html {
font-size: 16px;
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 1.875rem;
}
p {
font-size: 1rem;
}
گام های عملی
- ابتدا واحد مناسب را انتخاب کن.
- اگر واکنش گرایی مهم است، rem یا em بزن.
- برای پهناهای تمام صفحه، vw و vh را بررسی کن.
- بین عدد و واحد فاصله نگذار.
- پایه ریشه را منطقی تعیین کن؛ مثلاً 16px.
نکته: Viewport یعنی ابعاد پنجره مرورگر. 1vw مساوی 1٪ عرضِ پنجره است.
جمع بندی سریع
- px ثابت است؛ rem و em مقیاس پذیرند.
- rem به <html> وابسته است.
- em به «والد» وابسته است.
- بین عدد و واحد فاصله نگذار.
- برای واکنش گرایی، نسبی ها بهترند.
برای «واحدهای CSS» این صفحه را ذخیره کن. همچنین برای شمارنده ها به شمارنده ها سر بزن و برای استایل فرم ها به فرم ها مراجعه کن.