آشنایی با واحدهای اندازه گیری در سی اس اس CSS Units

برای ویژگی های سی اس اسی همچون width ، height ، padding ، margin ، font-size و… بایستی از CSS Units یا واحدهای اندازه گیری تعریف شده در زبان CSS استفاده نماییم.

در زبان CSS بطور کلی ۲ نوع واحد اندازه گیری وجود دارد که عبارتند از :

• واحدهای اندازه گیری مطلق یا Absolute
• واحدهای اندازه گیری نسبی یا Relative

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

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

• سانتی متر(Cm)، میلی متر(mm) و اینچ (in)
  اینها اندازه های رایج می باشند ( 1in = 2.54 cm = 25.4 mm )
• پیکسل (PX)
  اندازه پیکسل ها در دستگاه و سیستم های مختلف، می تواند تفاوت داشته باشد، اما CSS این مشکل را با در نظر گرفتن اندازه یک پیکسل در دستگاهی با تراکم پیکسل 96DPI (نقطه در اینچ) برطرف نمود.
  ( 1px = 1/96th of 1in یا 96 پیکسل در 1 اینچ )
• نقطه (PT)
  واحد نقطه، ثابت و نامتغیر می باشد و در تمامی دستگاه ها به یک اندازه ظاهر می‌گردد. تنها تفاوت واحد نقطه و پیکسل، در اندازه آنها می باشد.(1pt = 1/72 of 1in یا 72 نقطه در 1 اینچ)
• پیکا (Pc)
  واحد پیکا نسبت به pt و px کمتر استفاده می شود. ( 1pc = 12 pt یا 1 پیکا برابر است با 12 نقطه)

پس به طور خلاصه خواهیم داشت :

1in = 2.54 cm = 25.4 mm = 96 px = 72 pt = 6 pc

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

واحد های وابسته، واحد هایی می باشند که اندازه ی ثابتی ندارند و بر اساس اندازه های دیگر در صفحه وبسایت مورد تعریف قرار می گیرند.به عبارت دیگر مقادیر نسبی به چیز دیگری در عناصر والد وابسته هستند، مثل فونت یا اندازه محدوده دید (viewport).

• درصد (%)
  درصد عمومی ترین واحد وابسته ای است که در CSS مورد استفاده قرار می‌گیرد. و واحد درصد به اندازه عنصر پدر خود وابسته است. به این ترتیب که اگر عرض عنصر را برابر با %10 قرار دهیم، این مقدار %10 از اندازه عرض عنصر پدر خواهد بود.
• واحد em
  این واحد، تغییرات خودش را بر حسب سایز فونت عنصر پدر انجام می‌دهد. فونت ها می‌توانند سایز های متفاوتی داشته باشند. عملکرد واحد em، همواره به صورت شاخصی از سایز فونت عنصر پدر می باشد.
• واحد rem
  عملکرد این واحد، همانند واحد em می باشد. فقط با این تفاوت که از سایز فونت عنصر پدر متاثر نمی شود، بلکه از سایز فونت خود عنصر Html تاثیر می گیرد. بر اساس همین دلیل، به این واحد rem یا  root em(مرتبط به عنصر ریشه وبسایت یا html) گفته می‌شود.
• واحد های ch و ex
  واحدهای ex و ch همانند دو واحد em و rem به فونت و اندازهٔ فونت سایت وابسته‌اند اما بر خلاف em و rem، این دو همچنین به font-family نیز وابسته‌اند چرا که اندازه‌های آن‌ها برای هر فونت خاصی متفاوت خواهد بود.
  واحد ex بر اساس اندازه ارتفاع کاراکتر x (کوچک) در فونتی که برای عنصر مورد استفاده قرار میگیرد مشخص می شود.
  واحد ch بر اساس اندازه عرض کاراکتر 0 (صفر) در فونتی که برای عنصر مورد استفاده قرار میگیرد مشخص می شود.

• واحدهای محدوده دید (viewport)
  واحدهای نسبی دارد که وابسته به محدوده‌ی دیدی (اندازه) که مرورگرها در اختیار کاربر قرار می‌دهد هستند. در دستگاه‌های مختلف مانند تلفن همراه، تبلت، و مانیتور ما اندازه‌های متفاوتی از محدوده دید داریم که در هریک بر حسب اندازه محدوده دید، مقیاس عناصر مشخص می‌شود.
  
  واحد‌های viewport برابر هستند با: vw, vh, vmin, vmax
  یک vw برابر است با یک صدم عرض پنجره
  یک vh برابر است با یک صدم طول پنجره
  واحد vmin یک صدم viewport طول و عرض است که از میان آنها کوچکتر را انتخاب می کند. برای مثال اگر viewport برابر (850x650) باشد، 1vmin برابر با 6.5px خواهد بود.
  واحد vmax یک صدم viewport طول و عرض است که از میان آنها بزرگتر انتخاب می‌کند. برای مثال اگر viewport برابر (850x650) باشد، 1vmax برابر با 8.5px خواهد بود.