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

واحدهای اندازه گیری متنوعی در CSS وجود دارد که به طور کلی می توان آنها را به دو دسته مطلق و نسبی تقسیم کرد.

بسیاری از ویژگیهای CSS اندازه (طول) یا length می گیرند از جمله می توان به height ، width، font-size، margin و padding اشاره کرد. مقدار length یک عدد است که پشت بندش (بدون فاصله) واحد اندازه گیری نوشته می شود.

واحدهای اندازه گیری مطلق یا Absolute Lengths

واحدهای اندازه گیری مطلق یک مقدار ثابت دارند. یعنی عددی که همراه واحد مربوطه می آید، دقیقا همان اندازه ای است که در صفحه وب ظاهر می شود. این واحدها برای استفاده در صفحات وب چندان توصیه نمی شوند چراکه اندازه صفحه نمایش های مختلف، بسیار متفاوت است و می تواند با responsive شدن صفحه در تعارض باشد. در بین واحدهای اندازه گیری مطلق واحد اندازه گیری px بیشترین کاربرد را دارد.

اندازه پیکسل می تواند در دستگاه های مختلف، متفاوت باشد، اما CSS این مشکل را با در نظر گرفتن اندازه یک پیکسل در دستگاهی با تراکم پیکسل 96DPI (نقطه در اینچ) در نظر گرفته است و به این ترتیب px تبدیل به یک مقدار ثابت شده است

واحد نقطه نیز مانند واحد پیکسل، مقداری ثابت است و در تمامی دستگاه ها به یک اندازه ظاهر می‌شود. تفاوت واحد نقطه و پیکسل، تنها در اندازه آن هاست.

واحد پیکا نیز شرایط مشابهی دارد. مقداری ثابت دارد که با دو مقدار پیشین متفاوت است.

واحدهای اندازه گیری نسبی یا Relative Lengths

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

بهترین واحدهای اندازه گیری نسبی جهت طراحی وبسایت های ریسپانسیو، em و rem هستند.

واحدهای اندازه گیریvw ، vh ، vmin و vmax به عنوان واحدهای نسبی وابسته به viewport هستند.

واحدهای vw ، vh ، vmin و vmax در طراحی سایت های مقیاس پذیر یا واکنشگرا موثر خواهد بود.

نکات کاربردی

بین شماره و واحد، یک فاصله سفید گذاشته نمی شود.

اگر مقدار 0 باشد، می توان واحد را حذف کرد.

برای برخی از ویژگی های CSS، طول منفی مجاز است.