حداکثر ابعاد (Max-width)

استفاده از max-width، min-width، max-height و min-height برای طراحی منعطف و واکنش‌گرا

حداکثر و حداقل ابعاد در CSS

ویژگی‌های max-width، min-width، max-height و min-height برای کنترل انعطاف‌پذیر ابعاد عناصر استفاده می‌شوند.

چرا max-width مهم است؟

استفاده از width ثابت مشکلاتی ایجاد می‌کند — در صفحات بزرگ محتوا کش می‌آید و در موبایل سرریز می‌کند. max-width راه‌حل است:

/* ❌ عرض ثابت — در موبایل خراب می‌شود */
    .container {
        width: 1200px;
    }
    
    /* ✅ حداکثر عرض — منعطف */
    .container {
        max-width: 1200px;
        width: 100%;
        margin: 0 auto;
    }

فرمول کانتینر استاندارد

.container {
        width: 100%;        /* پر کردن کل فضای موجود */
        max-width: 1200px;  /* اما نه بیشتر از ۱۲۰۰px */
        margin: 0 auto;     /* وسط‌چین */
        padding: 0 20px;    /* فاصله از لبه‌ها */
    }

کلاس‌های کمکی رایج

.w-full   { width: 100%; }
    .w-auto   { width: auto; }
    .max-w-sm { max-width: 480px; }
    .max-w-md { max-width: 768px; }
    .max-w-lg { max-width: 1024px; }
    .max-w-xl { max-width: 1280px; }

min-width

.sidebar {
        width: 25%;
        min-width: 200px;  /* کوچک‌تر از ۲۰۰px نمی‌شود */
    }

max-height با scroll

.scroll-box {
        max-height: 300px;
        overflow-y: auto;  /* اسکرول عمودی */
    }

min-height

.hero {
        min-height: 100vh;  /* حداقل تمام صفحه */
    }
    
    .card {
        min-height: 200px;  /* حداقل ارتفاع */
    }

توابع min()، max() و clamp()

/* min — کوچک‌ترین مقدار را برمی‌داند */
    .box {
        width: min(100%, 600px);
        /* در موبایل ۱۰۰٪، در دسکتاپ ۶۰۰px */
    }
    
    /* max — بزرگ‌ترین مقدار را برمی‌داند */
    .text {
        font-size: max(16px, 2vw);
        /* حداقل ۱۶px، در صفحه بزرگ بیشتر */
    }
    
    /* clamp(min, ideal, max) — بهترین گزینه ⭐ */
    h1 {
        font-size: clamp(1.5rem, 5vw, 3rem);
        /* حداقل ۱.۵rem، ایده‌آل ۵vw، حداکثر ۳rem */
    }

بهترین شیوه‌ها

نکات مهم

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

ابزارهای مرتبط