حداکثر عرض در CSS (CSS Max-width)
ویژگی «حداکثر عرض (max-width)» بزرگ ترین عرض مجاز یک عنصر را تعیین می کند. بنابراین عنصر می تواند کوچکتر باشد، اما هرگز از مقدار تعیین شده عریض تر نمی شود. این رفتار برای طرح های واکنش گرا و خوانایی محتوا بسیار مفید است.
ویژگی حداکثر عرض (max-width) در CSS
طبق منبع، max-width حد بالای عرض را مشخص می کند و از سرریز عرضی جلوگیری می شود. در نتیجه هنگام کوچک شدن پنجره، محتوا داخل نما می ماند.
مشکل width ثابت
اگر برای یک جعبه فقط width ثابت تنظیم کنید، در نمایشگرهای کوچک تر بخشی از محتوا پنهان می شود و احتمالاً نوار اسکرول افقی ظاهر می گردد.
div.ex1{ width:500px; margin:auto; border:3px solid #73AD21; }استفاده از max-width به جای width
اکنون همان بلوک را با «حداکثر عرض (max-width)» تعریف می کنیم تا مرورگر در پنجره های باریک، کادر را متناسب کند و اسکرول افقی کاهش یابد.
div.ex2{ max-width:500px; margin:auto; border:3px solid #73AD21; }نکته: برای مقایسه، عرض پنجره را کمتر از مقدار تعیین شده کنید تا تفاوت بین width و max-width را ببینید.
ویژگی های مرتبط با حداکثر عرض
max-width: تعیین بیشینه عرض عنصر.width: تعیین عرض دقیق عنصر.
همچنین برای کنترل نمایش کلی عناصر، راهنمای نمایش/قابلیت دید را ببینید. سپس در مسیر چیدمان، به موقعیت دهی (Positioning) سر بزنید.
هشدار: «حداکثر عرض» رفتار چیدمان را محدود می کند؛ اما اگر محتوای داخلی خود پهن باشد، هنوز ممکن است به اسکرول نیاز داشته باشید.
مطالعه بیشتر درباره حداکثر عرض
راهنمای رسمی «حداکثر عرض» در MDN را مطالعه کنید. برای نمونه های بیشتر نیز به صفحه حداکثر عرض در W3Schools مراجعه کنید.