این آموزش در تاریخ ۱۳۹۹/۰۴/۲۱ آپدیت شده است.
آموزش ویژگی max-width در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی max-width در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی max-width در CSS
با استفاده از ویژگی max-width در CSS میتوان مشخص کرد که حداکثر / بیشترین اندازه عرض یک عنصر چقدر باشد.
یعنی اگه مثلا بگیم فلان عنصر حداکثر اندازه عرضش ۵۰۰ پیکسل باشه، دیگه اون عنصر نهایت عرضی که میتونه داشته باشه همون ۵۰۰ پیکسل هست، حالا میخواد اندازه عرض صفحه نمایش ۱۰۰۰ پیکسل باشه یا ۵۰۰۰ هزار، در هر صورت اندازه اون عنصر همون ۵۰۰ پیکسل هست.
یا مثلا برای تصاویر ما میتونیم از همین ویژگی با مقدار ۱۰۰% استفاده نماییم و تصاویر رو واکنش گرا کنیم، یعنی میگیم تصویر نهایت عرضش ۱۰۰درصد باشه در نتیجه همین یعنی واکنش گرایی تصاویر در یک صفحه وب.
یعنی دیگه شما صفحه نمایش رو کوچک یا بزرگ کنید، در هرصورت اون تصویر به نسبت اندازه صفحه نمایش میشه ۱۰۰درصد و همین یعنی تصویر از مرورگر بیرون نمیزنه که بخواد اسکرول بندازه و در نهایت واکنش گرا میشه.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی max-width را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : در باکس اول از اندازه عرض ۶۰۰ پیکسل استفاده شده، در نتیجه اگه اندازه عرض صفحه نمایش کوچکتر بشه ( یعنی از ۶۰۰ پیکسل کمتر بشه ) بصورت خودکار توسط مرورگرها اسکرول بصورت افقی ایجاد میشه و بقیه عرض عنصر میوفته داخل اسکرول.
ولی در باکس شماره ۲ از max-width استفاده شده، در اینصورت حتی اگه اندازه عرض صفحه نمایش هم کوچکتر بشه بازم عنصر خودشو با عرض صفحه وفق میده و اجازه نمیده اسکرول ایجاد بشه.
|
1 2 3 4 5 6 7 |
div.f1{ width:600px; } div.f2{ max-width:600px; } |
مثال شماره ۲ : مقایسه واکنش گرا بودن و نبودن تصویر با استفاده از ویژگی max-width ( برای واکنش گرایی تصاویر حتما از این ویژگی استفاده نمایید )
- بدون واکنش گرایی : با تغییر اندازه دادن صفحه میبینید که مرورگر اسکرول میندازه و بخش هایی از تصویر داخل اسکرول قرار میگیره
|
1 2 3 |
img{ max-width:500px; } |
- با واکنش گرایی : با تغییر اندازه دادن صفحه ، تصویر نیز در ابعاد اصلی خودش نمایش داده میشود و از اسکرول شدن جلوگیری میکند.
|
1 2 3 |
img{ max-width:100%; } |
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 بصورت زیر می باشد.
|
1 |
max-width: none|length|initial|inherit; |
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 ظاهر بگیره )
