این آموزش در تاریخ ۱۴۰۰/۱۱/۰۷ آپدیت شده است.
آموزش ویژگی 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 8 9 10 11 |
<style> .Box-1{ width: 600px; } .Box-2{ max-width: 600px; } </style> |
مثال شماره ۲ : استفاده از ویژگی max-width برای واکنش گرایی تصاویر
|
1 2 3 4 5 6 7 |
<style> img{ max-width:100%; } </style> |
Free-Learn
جدول مشخصات ویژگی max-width در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | none |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | دارد | اطلاعات بیشتر |
| نسخه | CSS2 |
| نحوه استفاده در جاوااسکریپت | object.style.maxWidth=”100px”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی max-width در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| max-width | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
max-width: none|length|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی max-width در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| none | مقدار پیش فرض – هیچ محدودیت اندازه بروی عنصر اعمال نمیشود |
| length | استفاده از واحدهای اندازه گیری مثه PX و.. ( مقادیر منفی مجاز نیست ) ( آموزش واحدهای اندازه گیری در CSS ) |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- اگر از max-width استفاده کرده باشید ویژگی width بی اثر خواهد شد.
- در همه حال اگر از ویژگی min-width استفاده کرده باشید ویژگی max-width بی اثر خواهد شد.
- اگر محتوای داخل عنصر از max-width بیشتر باشد محتوا بصورت خودکار شکسته و به سطر جدید میرود. ( بصورت خودکار ارتفاع میده به عنصر و از ایجاد اسکرول جلوگیری میکنه )
- اگر محتوای داخل عنصر از max-width کمتر باشد، اونوقت ویژگی max-width در خروجی ظاهری ندارد. ( یعنی حتما باید محتوا بیشتر باشه تا ویژگی max-width ظاهر بگیره )
