این آموزش در تاریخ ۱۴۰۰/۱۰/۲۰ آپدیت شده است.
آموزش تابع max در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تابع max در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تابع max در CSS
با استفاده از تابع max در CSS میتونیم چندین مقدار بصورت همزمان برای تگ مشخص کنیم بعدش دیگه خودش خودکار بین اون مقادیر بزرگترین مقدار رو انتخاب و اعمال میکنه.
از این تابع میشه در تمامی ویژگی هایی که مقدارشون بصورت ( عددی، واحد اندازه گیری و.. ) می باشد، استفاده کرد، مثه :
| نسخه | CSS3 |
|---|
Free-Learn
مثال از تابع max در CSS
در ادامه میتوانید یک مثال از این تابع را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : مشخص کردن اندازه عرض باکس ( بزرگترین مقدار اعمال میشه )
|
1 2 3 |
.MyBox{ width: max( 20px, 100px , 50% ); } |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تابع max در CSS پشتیبانی میکنند یا خیر.
| نام تابع | Chrome | Firefox | Opera | Safari | Edge |
| ()max | ۷۹ | ۷۵ | ۶۶ | ۱۳٫۱ | ۷۹ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این تابع در CSS بصورت زیر می باشد.
|
1 |
max( Value_1 , Value_2 ,.. ); |
Free-Learn
جدول مقادیر تابع max در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این تابع استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| Value_1 ,.. |
ضروری – یک یا چندین مقدار که با کاما از همدیگه جدا میشن |
Free-Learn
مثال های بیشتر
مثال شماره ۱
|
1 |
width: max( min(20px, 100px) , 50% ); |
مثال شماره ۲
|
1 |
width: max( (20px + 100px) , (25% + 25%) ); |
مثال شماره ۳
|
1 |
width: max( (500px / 2) , (50px + 50px) ); |
مثال شماره ۴
|
1 |
width: max( calc(200px * 2) , (50px + 50px) ); |
Free-Learn
نکات و توضیحات
- بصورت تودرتو هم میشه از این تابع استفاده کرد ( مثه مثال شماره ۱ از مثال های بیشتر )
- از عبارت های ریاضی مثه ( + و – و * و / ) هم میشه در این تابع استفاده کرد ( مثه مثال های شماره ۲ و ۳ از مثال های بیشتر )
- با استفاده از تابع min میشه کمترین یا کوچکترین مقدار رو انتخاب کرد
