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