امروز و در این مقاله قصد معرفی کامل آموزش توابع ریاضی calc و max و min در Css را داریم.
بله درست شنیدید… توابع!
این که سی اس اس یک زبان برنامه نویس نمیباشد، کاملا درست است. مانند HTML
اما دلیلی وجود ندارد که بخواهد کاربرانش را از تمام تکنیک های برنامه نویسی محروم کند.
برعکس در ویرایش های جدید، همواره قصد دارد که در حد امکان، خود را به ظاهر هم که شده، شبیه زبان برنامه نویسی کند و این یک امر فوق العاده میباشد.
در زیر میخواهیم به ۳ نوع از این توابع پراستفاده که در CSS3 معرفی شدند اشاره کنیم.
با استفاده از این تابع توانایی محاسبه های مختلف در پراپرتی هایی که نیاز به عدد برای مقادیر خود دارند را پیدا خواهید کرد.
بطور مثال شما میخواهید به width یک مقدار شرطی بدهید که ۵۰٪ صفحه بعلاوه ۲۰px را به اشغال خود در بیاورد.
و یا میخواهید بگویید ۳۰% صفحه منهای ۵۰px از آن را بعنوان مارجین استفاده کند. فقط کافیست کد های زیر را وارد نمایید.
width : calc(50% + 20px)
50٪ صفحه بعلاوه ۲۰px
margin : calc(30% – 50px)
30% صفحه منهای ۵۰px
بصورت کلی میتوان این دو را شبیه هم و کاربردشان را متضاد هم دانست.
در قالب دو مثال توضیح میدهیم.
مثلا میخواهیم بگوییم المانی داریم که در حالت عادی عرض۶۰۰px دارد و در مینیموم حالت به ۱۰۰% خواهد رسید. کد زیر را بخوانید:
width: min(100%, 600px)
و برای max میتوانیم مثال بزنیم که المانی داریم در حالت عادی یا ماکزیمم، ۵۰٪ عرض و در حالت مینیمم ۳۰۰px باشد. کد زیر:
width: max(50%, 300px)
اگر سوال یا ابهامی دارید زیر همین پست مطرح کنید تا پاسخ داده شود و این مقاله کوتاه را با دوستانتان به اشتراک بگزارید♥ منبع