حداکثر عرض (Max-width)
ویژگی «حداکثر عرض (Max-width)» سقف پهنای یک عنصر را تعیین می کند. یعنی عنصر می تواند کوچک تر شود، اما بزرگ تر از حد نشود. این کمک می کند صفحه در موبایل هم خوانا بماند؛ مثل دفتر کلاسی که از خط بیرون نزنیم.
تعریف ساده max-width
وقتی max-width را می گذاری، مرورگر اجازه نمی دهد پهنا از مقدار تعیین شده بیشتر شود. اما اگر فضا کم بود، عنصر کوچک می شود و اسکرول افقی نمی سازد.
<style>
/* نمونه واکنش گرا با حداکثر عرض */
.card {
max-width: 600px;
margin: auto;
border: 3px solid #73AD21;
padding: 8px;
}
</style>
<div class="card">این کارت بیش از 600px نمی شود.</div>
مشکل width ثابت
اگر فقط width بدهی، عنصر روی صفحه های باریک می زند بیرون. متن قطع می شود و احتمالاً اسکرول افقی می آید.
<style>
/* پهنای ثابت؛ در موبایل مشکل ساز است */
.box-fixed {
width: 600px;
margin: auto;
border: 3px solid #73AD21;
}
</style>
<div class="box-fixed">این جعبه در صفحه های کوچک می ریزد بیرون.</div>
بهترش کن با max-width
حالا همان طرح را با max-width می سازیم. روی موبایل جمع می شود، روی دسکتاپ تا سقف بزرگ می شود.
<style>
/* جایگزین امن و واکنش گرا */
.box-responsive {
max-width: 600px;
margin: auto;
border: 3px solid #73AD21;
}
</style>
<div class="box-responsive">این جعبه روی موبایل نمی شکند.</div>
گام های سریع تمرین
- یک div بساز و به آن width بده.
- پنجره را کوچک کن و مشکل را ببین.
- width را بردار و max-width بگذار.
نکته: برای متن های طولانی، max-width خوانایی را حفظ می کند. معمولاً عددی بین 600 تا 800 پیکسل مناسب است.
برای تکمیل مبحث، بخش های مرتبط را ببین: نمایش (Display)، جدول واکنش گرا و استایل جدول.
جمع بندی سریع
- max-width سقف پهنا را تعیین می کند.
- از اسکرول افقی ناخواسته جلوگیری می کند.
- برای طراحی واکنش گرا ضروری است.
- width ثابت روی موبایل دردسرساز است.
- ترکیب max-width و margin:auto مرکزچین می کند.