آموزش کامل واحدهای اندازه گیری در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کامل واحدهای اندازه گیری در CSS با من همراه باشید.

آموزش کامل واحدهای اندازه گیری در CSS

Free-Learn

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

ما در جلسه قبلی بطور کامل با آموزش نحوه ساخت / ایجاد منو در CSS آشنا شدیم و یاد گرفتیم که چگونه میتوانیم یک منوی افقی و همچنین یک منوی عمودی در یک صفحه وب ایجاد نماییم.

پیشنهاد میکنم آموزش کار با منوها یا Navigation Bar در CSS را مشاهده نمایید.

حال در این جلسه میخوایم با انواع واحدهای اندازه گیری در CSS آشنا شویم و نحوه کار با آنها را یاد بگیریم، پس لطفا در ادامه و تا پایان این جلسه با من همراه باشید.

همونطور که میدونید ما برای تعیین اندازه عرض و ارتفاع یک عنصر در CSS باید از ویژگی های width و height که برای اینکار ایجاد شده اند استفاده نماییم.

یعنی از ویژگی width برای تعیین عرض و ویژگی height برای تعیین ارتفاع یک عنصر میتوان استفاده کرد، سپس همین ویژگی های width و height یک مقدار باید داشته باشند.

و همین مقدار یعنی » واحدهای اندازه گیری در CSS ، یعنی مثلا ما مشخص میکنیم که واحد اندازه گیری ما پیکسل ( px ) باشد یا مثلا بصورت درصدی ( % ) باشد.

Free-Learn

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

در زبان CSS تعدادی زیادی واحد اندازه گیری برای مشخص کردن اندازه عرض و ارتفاع عناصر وجود دارد، که این واحدها به ۲ دسته کلی تقسیم می شوند :

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

هر کدام از این دسته ها نیز دارای تعدادی واحد اندازه گیری می باشند که همه ی آنها را در ادامه و تا پایان این جلسه بطور کامل آموزش خواهم داد. لطفا با بنده همچنان همراه باشید.

Free-Learn

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

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

خب واقعا یعنی چی ثابت یا مطلق !؟ یعنی اندازه ای که ما در این حالت مشخص میکنیم یک اندازه ثابت می باشد، یعنی اگه مثلا اندازه صفحه نمایش تغییر کرد اون متن با اندازش ثابت میمونه و هیچ تغییر نمیتونه کنه.

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

پس تفاوت اصلی بین اندازه های ثابت یا مطلق با اندازه های نسبی در واکنش گرایی یا ( مقیاس پذیری ) عناصر در حالت های مختلف صفحه نمایش می باشد.

معمولا از واحدهای مطلق در طراحی های وب استفاده نمی شود یا خیلی کم استفاده می شود، ولی برای چاپ های خارجی (چاپ بنر و..) بهتر است از واحدهای مطلق استفاده شود.

همچنین معمولا (بیشتر) از واحدهای PX و PT در حوزه طراحی وب استفاده می شود.

در جدول زیر میتوانید تمامی واحدهای اندازه گیری مطلق را مشاهده نمایید و همچنین برای مشاهده مثال هر کدام از آنها لطفا بروی دکمه مثال کلیک نمایید.

  • واحدهای px,%,em  : استفاده از آنها در صفحه نمایش (طراحی صفحات وب) توصیه می شود.
  • واحدهای mm,cm,pc,in : استفاده از آنها در صفحه نمایش (طراحی صفحات وب) اصلا توصیه نمی شود.
واحد اندازه گیری توضیح مثال
cm یا Centimeter یا سانتی متر اندازه را بصورت سانتی متر مشخص میکند. مثال
mm یا Millimeter یا میلی متر اندازه را بصورت میلی متر مشخص میکند. مثال
in یا Inche یا اینچ ۱ اینچ برابر است با ۹۶ پیکسل یا برابر است با ۲٫۵۴ سانتی متر مثال
px یا Pixel یا پیکسل اندازه را بصورت پیکسلی مشخص میکند. مثال
pt یا Point یا پوینت ۱ پوینت برابر است با ۱٫۷۲ از ۱ اینچ مثال
pc یا Pica یا پیکا ۱ پیکا برابر است با ۱۲ پوینت و ۶ پیکا برابر است با ۷۲ پوینت مثال

Free-Learn

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

اسمش روشه دیگه ! یعنی نسبی بودن ، یعنی نسبت داشتن با یک عنصر دیگر یا یک اندازه دیگر ، مثلا میگیم اندازه تگ H2 به نسبت اندازه تگ P فلان مقدار باشد.

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

بیشتر سعی کنید از واحدهای اندازه گیری نسبی در طراحی هاتون استفاده نمایید.

واحدهای em و rem بیشترین مقایس پذیری را دارند لذا از آنها میتوانید در طراحی هاتون استفاده نمایید.

در جدول زیر میتوانید لیست کامل واحدهای اندازه گیری نسبی یا Relative را مشاهده نمایید و همچنین برای مشاهده مثال آنلاین هر یک از آنها بروی دکمه مثال کلیک نمایید.

واحد اندازه گیری توضیح مثال
em نسبت به اندازه عنصر والد یا پدر تغییر میکند. مثال
ex نسبت به اندازه ارتفاع کاراکتر x (ایکس انگلیسی) کوچک. مثال
ch نسبت به اندازه عرض کاراکتر (۰) تعیین میشود. مثال
rem به نسبت اندازه فونت ریشه صفحه ( تگ html ) مشخص میشود. مثال
vw به نسبت ۱درصد از عرض کل صفحه نمایش. مثال
vh به نسبت ۱درصد از ارتفاع کل صفحه نمایش. مثال
vmin به نسبت ۱درصد از عرض کل صفحه نمایش. ( در بُعد / ابعاد کوچکتر ) مثال
vmax به نسبت ۱درصد از ارتفاع کل صفحه نمایش. ( در بُعد / ابعاد بزرگتر ) مثال
% (درصد) اندازه را بصورت درصدی مشخص میکند. مثال

Free-Learn

جدول پشتیبانی مرورگرها از واحدهای اندازه گیری

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از واحدهای اندازه گیری در CSS پشتیبانی می کنند یا خیر.

واحد اندازه گیری Chrome Firefox Opera Safari IE
em, ex, %, px, cm, mm, in, pt, pc ۱٫۰ ۱٫۰ ۳٫۵ ۱٫۰ ۳٫۰
ch ۲۷٫۰ ۱٫۰ ۲۰٫۰ ۷٫۰ ۹٫۰
rem ۴٫۰ ۳٫۶ ۱۱٫۶ ۴٫۱ ۹٫۰
vh, vw ۲۰٫۰ ۱۹٫۰ ۲۰٫۰ ۶٫۰ ۹٫۰
vmin ۲۰٫۰ ۱۹٫۰ ۲۰٫۰ ۶٫۰ ۹٫۰
vmax ۲۰٫۰ ۱۹٫۰ ۲۰٫۰ ۷٫۰ خیر

واحد اندازه گیری vmax در مرورگر اینترنت اکسپلورر فعلا پشتیبانی نمی شود و همچنین واحد vmin در این مرورگر با نام vm مورد استفاده قرار میگیرد.


Free-Learn

جدولی از مقادیر تبدیل شده PX به EM

در جدول زیر میتوانید تعدادی از مقادیر واحد PX ( پیکسل ) را که به واحد EM تبدیل شده اند را مشاهده نمایید.

مقدار عددی PX معادل EM
۱px برابر است با ۰٫۰۶۲۵EM
۲px برابر است با ۰٫۱۲۵EM
۳px برابر است با ۰٫۱۸۷۵EM
۴px برابر است با ۰٫۲۵EM
۵px برابر است با ۰٫۳۱۲۵EM
۹px برابر است با ۰٫۵۶۲۵EM
۱۳px برابر است با ۰٫۸۱۲۵EM
۱۶px برابر است با ۱EM
۲۰px برابر است با ۱٫۲۵EM

Free-Learn

دریافت PDF یا پرینت این مطلب