امروز و در این مقاله قصد معرفی کامل آموزش توابع ریاضی calc و max و min در Css را داریم.

بله درست شنیدید… توابع!

این که سی اس اس یک زبان برنامه نویس نمیباشد، کاملا درست است. مانند HTML

اما دلیلی وجود ندارد که بخواهد کاربرانش را از تمام تکنیک های برنامه نویسی محروم کند.

برعکس در ویرایش های جدید، همواره قصد دارد که در حد امکان، خود را به ظاهر هم که شده، شبیه زبان برنامه نویسی کند و این یک امر فوق العاده میباشد.

در زیر میخواهیم به ۳ نوع از این توابع پراستفاده که در CSS3 معرفی شدند اشاره کنیم.

تابع calc در css

با استفاده از این تابع توانایی محاسبه های مختلف در پراپرتی هایی که نیاز به عدد برای مقادیر خود دارند را پیدا خواهید کرد.

بطور مثال شما میخواهید به width یک مقدار شرطی بدهید که ۵۰٪ صفحه بعلاوه ۲۰px را به اشغال خود در بیاورد.

و یا میخواهید بگویید ۳۰% صفحه منهای ۵۰px از آن را بعنوان مارجین استفاده کند. فقط کافیست کد های زیر را وارد نمایید.

width : calc(50% + 20px)

50٪ صفحه بعلاوه ۲۰px

margin : calc(30% – 50px)

30% صفحه منهای ۵۰px

تابع min و max در css

بصورت کلی میتوان این دو را شبیه هم و کاربردشان را متضاد هم دانست.

در قالب دو مثال توضیح میدهیم.

مثلا میخواهیم بگوییم المانی داریم که در حالت عادی عرض۶۰۰px دارد و در مینیموم حالت به ۱۰۰% خواهد رسید. کد زیر را بخوانید:

width: min(100%, 600px)

و برای max میتوانیم مثال بزنیم که المانی داریم در حالت عادی یا ماکزیمم، ۵۰٪ عرض و در حالت مینیمم ۳۰۰px باشد. کد زیر:

width: max(50%, 300px)

اگر سوال یا ابهامی دارید زیر همین پست مطرح کنید تا پاسخ داده شود و این مقاله کوتاه را با دوستانتان به اشتراک بگزارید♥ منبع