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