آشنایی با توابع min() و max() در CSS

CSS در طی سال‌ها تغییرات زیادی کرده است و با معرفی ویژگی‌های جدید، طراحان وب اکنون قادر به ایجاد طرح‌های انعطاف‌پذیر و پویا هستند. دو ویژگی مهم که در این تغییرات نقش دارند، توابع min() و max() هستند که به طراحان این امکان را می‌دهند تا مقادیر را به‌صورت محدود تعریف کنند و طرح‌هایی ایجاد کنند که در تمام اندازه‌های صفحه نمایش به‌خوبی نمایش داده شوند.

در این مقاله، به بررسی نحوه کارکرد توابع min() و max() در CSS، زمان‌های استفاده از آن‌ها و چگونگی کمک به بهینه‌سازی طرح‌های وب خواهیم پرداخت. همچنین با استفاده از مثال‌های عملی به کاربردهای دنیای واقعی این توابع خواهیم پرداخت.

توابع min() و max() در CSS چیستند؟

توابع min() و max() بخشی از ماژول CSS Values and Units Level 4 هستند که به شما این امکان را می‌دهند تا مقادیر را به‌صورت پویا محاسبه کرده و کمترین یا بیشترین مقدار از یک لیست از مقادیر را انتخاب کنید.

• تابع min(): این تابع کمترین مقدار از لیست مقادیر داده‌شده را باز می‌گرداند. به‌عنوان‌مثال، min(100px, 50%) اگر عرض viewport از 100px کمتر باشد، 50% را باز می‌گرداند و در غیر این صورت، 100px را برمی‌گرداند.
• تابع max(): این تابع بزرگترین مقدار از لیست مقادیر داده‌شده را باز می‌گرداند. به‌عنوان‌مثال، max(200px, 50%) اگر عرض viewport از 50% بزرگتر باشد، 200px را باز می‌گرداند و در غیر این صورت، 50% را باز می‌گرداند.

این دو تابع به شما این امکان را می‌دهند که طرح‌های خود را به‌گونه‌ای ایجاد کنید که به‌طور خودکار با تغییر اندازه صفحه نمایش تطبیق پیدا کنند و نیازی به استفاده از جاوااسکریپت نباشد.

آیا میدانید مدرسه فرانت اند پرنیان، دوره فرانت اند از صفر تا صد را بصورت حرفه ای برگزار میکند؟

مثال‌هایی از استفاده توابع min() و max() در CSS

مثال 1: طراحی پاسخگو با استفاده از min()

فرض کنید می‌خواهید عرض یک المان را به‌گونه‌ای تنظیم کنید که در صفحات کوچک‌تر اندازه آن کمتر از یک مقدار ثابت نباشد، اما در صفحات بزرگتر به یک مقدار حداکثر برسد:

.container {
  width: min(80%, 1200px);
}

در اینجا، عرض .container به‌طور خودکار از 80% عرض صفحه نمایش تبعیت می‌کند، مگر اینکه از 1200px بزرگتر شود.

مثال 2: استفاده از max() برای اندازه‌های حداقلی

اگر می‌خواهید یک المان در صفحات کوچکتر از یک مقدار حداقل خاص نباشد، می‌توانید از max() استفاده کنید:

.box {
  height: max(300px, 20vh);
}

کاربردهای عملی توابع min() و max()

توابع min() و max() در طراحی واکنش‌گرا (responsive) بسیار مفید هستند. این توابع به شما این امکان را می‌دهند که به‌راحتی مقادیر متغیر را برای ویژگی‌هایی مانند عرض، ارتفاع، حاشیه، padding و دیگر ویژگی‌ها تنظیم کنید، بدون آنکه نیاز به کد جاوااسکریپت یا استفاده از مدیا کوئری‌های پیچیده باشد.

پیشنهاد میکنیم مقاله آموزش تیلویند مدرسه پرنیان را مطالعه فرمایید.

این توابع به‌ویژه زمانی که می‌خواهید طراحی‌های انعطاف‌پذیرتر ایجاد کنید و از تنظیمات ثابت دوری کنید، بسیار کارآمد هستند. به‌طور مثال، می‌توانید از این توابع برای تنظیم اندازه فونت‌ها، ارتفاع بخش‌ها، یا حتی موقعیت‌های پویا استفاده کنید.

نتیجه‌گیری

توابع min() و max() در CSS ابزارهای قدرتمندی برای ایجاد طرح‌های واکنش‌گرا و پویا هستند. این توابع به شما کمک می‌کنند تا مقادیر مختلف را به‌صورت منطقی محدود کرده و طرح‌های خود را بدون نیاز به کدهای پیچیده یا جاوااسکریپت بهینه کنید. استفاده از این توابع می‌تواند تجربه کاربری بهتری را برای بازدیدکنندگان فراهم کند، چرا که طرح‌های شما به‌خوبی با هر اندازه صفحه نمایش هماهنگ می‌شوند.

در نهایت، با استفاده از توابع min() و max(), شما می‌توانید طراحی‌های بیشتری را در دسترس خود قرار دهید که به راحتی قابل تغییر و تنظیم هستند.

امیدواریم از این مقاله آشنایی با توابع min() و max() در CSS نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.