این آموزش در تاریخ ۱۴۰۲/۰۶/۲۶ آپدیت شده است.

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

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

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

Free-Learn

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

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

همونطور که میدونید در CSS ما برای مشخص کردن اندازه های عرض و ارتفاع یا مثلا اندازه Padding ، Margin و … خب باید یه عددی بهش بدیم ، خب این عدد باید یه واحد اندازه گیری داشته باشه که اندازه اون تگ به نسبت اون واحد اندازه گیری مشخص شه.

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

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

Free-Learn

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

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

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

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

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

معمولا و بیشتر از واحد PX در حوزه طراحی وب استفاده می شود.

  • واحدهای px,%,em  : استفاده از آنها در طراحی وب توصیه می شود.
  • واحدهای mm,cm,pc,in : استفاده از آنها در طراحی وب اصلا توصیه نمی شود.
واحد اندازه گیری توضیح مثال
cm یا سانتی متر تنظیم اندازه بصورت سانتیمتر مثال
mm یا میلی متر تنظیم اندازه بصورت میلیمتر مثال
in یا اینچ ۱ اینچ برابر است با ۹۶ پیکسل مثال
px یا پیکسل تنظیم اندازه بصورت پیکسلی مثال
pt یا پوینت ۱ پوینت برابر است با ۱٫۷۲ از ۱ اینچ مثال
pc یا پیکا ۱ پیکا برابر است با ۱۲ پوینت مثال

Free-Learn

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

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

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

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

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

واحدهای em و rem بیشترین مقیاس پذیری رو در یک صفحه به نسبت دیگر عناصر دارند.

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

Free-Learn

تبدیل آنلاین واحد پیکسل به em و pt و درصد

Free-Learn

نکات و توضیحات

  • واحد PX بیشترین استفاده رو در حوزه طراحی وب داره.
  • از واحدهای PT ( پوینت ) یا PC ( پیکا ) و EX و CH خیلی خیلی کم و تاحدودی اصلا استفاده نمیشه.
  • واحدهای درصد ( % ) و EM و REM بیشترین استفاده رو در بحث واکنش گرایی دارن.
  • اینکه از کدوم واحد در طراحی هاتون استفاده کنید کاملا سلیقه ای هستش ولی خب باید منطق رو در نظر بگیرید ( مثلا تا PX هست از PT نیاز نیست استفاده کنید، یا مثلا برای واکنش گرا بودن حتما سعی کنید از % استفاده کنید )

Free-Learn

مثال های بیشتر

مثال شماره ۱ : تمام صفحه کردن آی فریم ( استفاده از واحدهای vw و vh )

امتحان کنید

توضیح مثال بالا :

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

حال اگه ما بخوایم یه چیزی رو تمام صفحه ( فیت کامل صفحه ) کنیم خیلی راحت میتونیم از ۱۰۰vw ( یعنی ۱۰۰درصد اندازه عرض صفحه نمایش ) و ۱۰۰vh ( یعنی ۱۰۰درصد اندازه ارتفاع صفحه نمایش )

Free-Learn

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