توابع ریاضی (Math Functions)
توابع ریاضی CSS یعنی محاسبه مقدارها با حساب وکتاب. «تابع (Function)» یک فرمول آماده است. بنابراین اندازه ها را هوشمند می کنی و طراحی واکنش گرا ساده تر می شود.
توابع ریاضی CSS چه می کنند؟
این توابع مثل ماشین حساب عمل می کنند. سپس خروجی را به عنوان مقدار ویژگی می گذارند. چهار تابع مهم این ها هستند: calc()، max()، min()، clamp().
calc(): جمع، تفریق، ضرب، تقسیم
تابع calc() هر چهار عمل را پشتیبانی می کند. حتی می توانی واحدها را ترکیب کنی؛ مثل درصد با پیکسل.
#div1 {
margin: auto;
width: calc(100% - 100px);
height: calc(30vh + 50px);
border: 1px solid black;
padding: 10px;
}
max(): بزرگ تر را انتخاب کن
تابع max() از بین چند مقدار، بزرگ ترین را برمی دارد. این کار برای حداقل عرض مفید است.
#div1 {
height: 100px;
width: max(50%, 300px);
border: 1px solid black;
padding: 10px;
}
min(): کوچک تر را انتخاب کن
تابع min() کوچک ترین مقدار را می گیرد. بنابراین از بیرون زدن عناصر جلوگیری می کند.
#div1 {
height: 100px;
width: min(50%, 300px);
border: 1px solid black;
padding: 10px;
}
clamp(): مقدار بین حداقل و حداکثر
تابع clamp(min, preferred, max) مقدار ترجیحی را بین کمینه و بیشینه محدود می کند. برای تایپوگرافی سیال عالی است.
h2 {
font-size: clamp(2rem, 2.5vw, 3.5rem);
}
p {
font-size: clamp(1rem, 2.5vw, 2.5rem);
}
گام های عملی
- اول نیاز واکنش گرایی را مشخص کن.
- برای ترکیب واحدها از calc() کمک بگیر.
- برای کران پایین از max() استفاده کن.
- برای کران بالا از min() استفاده کن.
- برای تایپ سیال از clamp() بهره ببر.
نکته: قبل از توابع، به واحدها و به ویژگی اختصاصی سازی هم توجه کن. سپس اگر لازم شد از ویژگی !important استفاده کن.
جمع بندی سریع
- calc برای حساب دقیق مقادیر است.
- max بزرگ ترین مقدار را برمی دارد.
- min کوچک ترین مقدار را برمی دارد.
- clamp مقدار را بین دو مرز نگه می دارد.
- برای فونت سیال، clamp بهترین انتخاب است.