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

جهت تعیین اندازه برخی ویژگی های طولی و عرضی در تگ های HTML ، واحدهای اندازه گیری زیادی در زبان طراحی CSS وجود دارد.

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

برای تعیین اندازه ها از یک عدد و واحد اندازه گیری استفاده می شود. مثال: 5px ، 3em و..

نکات مهم

1- هرگز بین عدد و واحد ا ندازه گیری CSS فاصله نگذارید؛ چرا که یک خطای سینتکسی خواهد بود. به عنوان مثال مقادیر 5 em و یا 20 % که بین عدد و واحد اندازه گیری فاصله افتاده اشتباه است. و حالت صحیح آن 5em و %20 است.

2- در صورتی که مقدار 0 را برای ویژگی CSS مربوطه در نظر گرفتید، نیاز به استفاده از CSS Units یا واحدهای اندازه گیری ندارید.

3- در برخی ویژگی های CSS شما اجازه استفاده اندازه های منفی یا negative را دارید. ولی در برخی ویژگی های دیگر CSS اجازه استفاده اندازه های منفی یا negative را ندارید. که در زمان تدریس هر ویژگی توضیح خواهیم داد.

4- واحدهای اندازه گیری در CSS به دو بخش کلی تقسیم می شوند. که شامل واحدهای مطلق و نسبی می باشند.

تقسیم بندی کلی واحدهای اندازه گیری یا CSS Units

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

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

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

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

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

و در صورت نیاز بایستی به مقدار کم استفاده شوند؛ زیرا اینگونه واحدها برای هماهنگ شدن از نظر اندازه در دستگاه ها با رزولوشن های مختلف چندان مناسب نیستند.

اما می توانند جهت لایه بندی صفحه پرینت همچون چاپ بنرهای تبلیغاتی و… مناسب واقع شوند.

در بین واحد های اندازه گیری مطلق واحد اندازه گیری px کاربرد متداول تری دارد.

و سایر واحدهای مطلق یا Absolute Lengths معمولا استفاده کمتری در صفحات وب دارند.

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

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

واحدهای اندازه گیری نسبی را برای هر تگ اچ تی ام ال نسبت به یک تگ HTML دیگر و یا نسبت به واحد اندازه گیری دیگر تعیین می کنند.

نکات تکمیلی در مورد واحد های اندازه گیری نسبی زبان CSS

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

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

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

بهترین واحدهای اندازه گیری مورد تایید W3C در طراحی وب ریسپانسیو

واحد اندازه گیری px ، em و rem به عنوان بهترین واحدهای اندازه گیری در طراحی سایت واکنشگرا هستند