جستجو برای:
  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت
 
  • 02144824488
  • info@myhamyar.com
  • بلاگ
  • تماس با ما
  • درباره ما
همیارِمَن  | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیک
دسترسی سریع
  • پشتیبان سایت
0

ورود و ثبت نام

  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت

بلاگ

همیارِمَن | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیکبلاگدوره های رایگانآموزش کامل واحدهای اندازه گیری در CSS

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

11 مهر 1400
ارسال شده توسط همیار من
دوره های رایگان
308 بازدید
css

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

فهرست عناوین

  • واحدهای اندازه گیری در CSS
  • انواع واحدهای اندازه گیری در CSS
  • واحدهای اندازه گیری مطلق یا Absolute
  • واحدهای اندازه گیری نسبی یا Relative
  • جدول پشتیبانی مرورگرها از واحدهای اندازه گیری

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

بیشتر بخوانیم:
  • آموزش Image Sprites در CSS
  • چگونه می توانیم با تولید محتوا کسب درآمد کنیم؟
  • بدترین فیلم ابرقهرمانی از نظر کریستوفر نولان چیست؟
  • آموزش استراتژی محتوا | رشد کسب‌وکار شما با استفاده از بازاریابی محتوا
  • ۱۹ فیلم دی‌سی که پس از The Suicide Squad منتشر می شوند
اشتراک گذاری:
برچسب ها: CSSآموزشآموزش CSSآموزش css pdfآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش CSS مقدماتیآموزش css و htmlآموزش css3آموزش css3 pdfآموزش css3 پیشرفتهآموزش کامل واحدهای اندازه گیری در CSS
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!

مطالب زیر را حتما مطالعه کنید

لوگو ادمین سایت

آموزش انیمیشن‌سازی با CSS

در این قسمت از آموزش انیمشن‌سازی در CSS قصد داریم به طور کلی به آموزش...
همیارمن

نحوه اضافه کردن کد PHP در وردپرس

اگر به دنبال اضافه کردن کد php در وردپرس به صفحات در وردپرس هستید به...

دوره رایگان طراحی فروشگاه اینترنتی!

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

آموزش ایجاد لیست کشویی وابسته به هم در HTML

در این مقاله در همیار من قصد داریم یکی از مطالب بسیار مهم و کاربردی...
ترفندهای عکاسی حرفه‌ای با موبایل (ساده و بدون هزینه!)

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

یکی از وسایلی که امروزه تقریبا با همه ما همراه شده است و ساعت‌ها آن...
لوگو ادمین سایت

DOM چیست و چه کاربردی دارد؟

DOM عبارتی است که بیشتر آنرا در زبان جاوا اسکریپت می‌شنویم. در این مقاله در...

دیدگاهتان را بنویسید لغو پاسخ

جستجو در همیارمَن
جستجو برای:
  • آموزش مجازی
  • اخبار سینما
  • افزونه وردپرس
    • آموزش افزونه وردپرس
  • بازی
  • پیشنهادی
  • دسته‌بندی نشده
  • دوره های رایگان
  • سریال
  • فناوری
  • فیلم
    • اکشن
    • تاریخی
    • ترسناک
    • جنایی
    • کمدی
    • مستند
    • معمایی
    • هیجان انگیز
    • ورزشی
  • قالب HTML
  • قالب وردپرس
    • قالب خبری و وبلاگ
    • قالب شرکتی
    • قالب نمونه کار
    • قالب های چند منظوره
  • مقالات
    • بازایابی دیجیتال
    • برنامه نویسی
    • تولید و بازاریابی محتوا
    • طراحی و گرافیک
آخرین مطالب سایت
  • آموزش انیمیشن‌سازی با CSS
  • بهترین فیلم های اسلشر تاریخ سینما
  • نقد فیلم Cure – یک فیلم هیپنوتیزم کننده
  • نقد فیلم یتیم Orphan: First Kill
  • کسب درآمد از آموزش آنلاین چگونه است؟
برچسب‌ها
CSS HTML آموزش آموزش CSS آموزش css3 آموزش css3 pdf آموزش css3 رایگان آموزش css3 پیشرفته آموزش css pdf آموزش css حرفه ای آموزش css و html آموزش css پروژه محور آموزش css پیشرفته آموزش افزونه وردپرس آموزش تولید محتوا آموزش رایگان html همیارمن آموزش رایگان زبان html آموزش وب سایت افزونه وردپرس بازاریابی بازاریابی دیجیتال بازی بررسی بررسی بازی تولید محتوا دانلود افزونه وردپرس دانلود قالب وردپرس دوره دوره رایگان دیجیتال مارکتینگ سایت فناوری فیلم قالب قالب سایت قالب وب سایت قالب وردپرس نقد نقد بازی نقد فیلم نقد و بررسی نقد و بررسی بازی نقد و بررسی فیلم وردپرس ووکامرس

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت