آموزش ویژگی max-width در CSS

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

آموزش ویژگی max-width در CSS

Free-Learn

ویژگی max-width در CSS

با استفاده از ویژگی max-width در CSS میتوان مشخص کرد که حداکثر / بیشترین اندازه عرض یک عنصر چقدر باشد.

یعنی اگه مثلا بگیم فلان عنصر حداکثر اندازه عرضش ۵۰۰ پیکسل باشه، دیگه اون عنصر نهایت عرضی که میتونه داشته باشه همون ۵۰۰ پیکسل هست، حالا میخواد اندازه عرض صفحه نمایش ۱۰۰۰ پیکسل باشه یا ۵۰۰۰ هزار، در هر صورت اندازه اون عنصر همون ۵۰۰ پیکسل هست.

یا مثلا برای تصاویر ما میتونیم از همین ویژگی با مقدار ۱۰۰% استفاده نماییم و تصاویر رو واکنش گرا کنیم، یعنی میگیم تصویر نهایت عرضش ۱۰۰درصد باشه در نتیجه همین یعنی واکنش گرایی تصاویر در یک صفحه وب.

یعنی دیگه شما صفحه نمایش رو کوچک یا بزرگ کنید، در هرصورت اون تصویر به نسبت اندازه صفحه نمایش میشه ۱۰۰درصد و همین یعنی تصویر از مرورگر بیرون نمیزنه که بخواد اسکرول بندازه و در نهایت واکنش گرا میشه.

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از ویژگی max-width را در زبان CSS مشاهده نمایید.

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

ولی در باکس شماره ۲ از max-width استفاده شده، در اینصورت حتی اگه اندازه عرض صفحه نمایش هم کوچکتر بشه بازم عنصر خودشو با عرض صفحه وفق میده و اجازه نمیده اسکرول ایجاد بشه.

امتحان کنید

مثال شماره ۲ : مقایسه واکنش گرا بودن و نبودن تصویر با استفاده از ویژگی max-width ( برای واکنش گرایی تصاویر حتما از این ویژگی استفاده نمایید )

  • بدون واکنش گرایی : با تغییر اندازه دادن صفحه میبینید که مرورگر اسکرول میندازه و بخش هایی از تصویر داخل اسکرول قرار میگیره

امتحان کنید

  • با واکنش گرایی : با تغییر اندازه دادن صفحه ، تصویر نیز در ابعاد اصلی خودش نمایش داده میشود و از اسکرول شدن جلوگیری میکند.

امتحان کنید

Free-Learn

جدول مشخصات ویژگی max-width در CSS

در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.

مقدار پیش فرض none
قابل ارث بری ندارد | اطلاعات بیشتر
قابل متحرک سازی دارد | اطلاعات بیشتر
نسخه CSS2
نحوه استفاده در جاوااسکریپت object.style.maxWidth=”100px”;

Free-Learn

پشتیبانی مرورگرها

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

نام ویژگی Chrome Firefox Opera Safari IE
max-width ۱۸٫۰ ۲٫۰ ۱۰٫۰ ۳٫۲ ۷٫۰

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.

Free-Learn

جدول مقادیر ویژگی max-width در CSS

در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.

مقدار توضیح
none پیش فرض – max-width بروی عنصر اعمال نمیشود
length استفاده از واحدهای اندازه گیری همچون px,em و..
( مقادیر منفی مجاز نیست )
( آموزش واحدهای اندازه گیری در CSS )
initial استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر
inherit استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر

Free-Learn

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

  • اگر از max-width استفاده کرده باشید ویژگی width نادیده گرفته میشود.
  • در همه حال اگر از min-width استفاده کرده باشید ویژگی max-width نادیده گرفته میشود.
  • اگر محتوای داخل عنصر از max-width بیشتر باشد محتوا بصورت خودکار شکسته و به سطر جدید میرود. ( بصورت خودکار ارتفاع میده به عنصر و از ایجاد اسکرول جلوگیری میکنه )
  • اگر محتوای داخل عنصر از max-width کمتر باشد، اونوقت ویژگی max-width در خروجی ظاهری ندارد. ( یعنی حتما باید محتوا بیشتر باشه تا ویژگی max-width ظاهر بگیره )

Free-Learn

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