زنگ CSS: جلسه دهم - عرض و عرض حداکثر در المان‌ها

یکی از موضوعاتی که در اچ‌تی‌ام‌ال یاد گرفته‌ایم استفاده از عرض و طول برای المان‌های دارای اندازه همچون div است. در واقع شما می‌توانید برای عکس‌ها یا دیویژن‌های خود اندازه تعیین کنید. برای مثال داریم:

المان غیر ریسپانسیو که با تغییر ابعاد مرورگر تغییر نمی کند

 div.ex1 {    width: 500px;    margin:  auto;     border:  3px solid #8AC007;}

المان غیر ریسپانسیو که با تغییر ابعاد مرورگر تغییر نمی کند

چون عرض المان شما بیشتر از ۵۰۰ پیکسل است و عرض مرورگر شما کمتر از ۵۰۰ پیکسل است، مشکلی که پیش می‌آید این است که صفحه‌ی شما اسکرول خواهد شد. پنجره‌ی مرورگر خود را کوچک کنید تا بهتر این موضوع را مشاهده کنید.

برای رفع این مشکل باید از خاصیت max-width در سی‌اس‌اس استفاده کرد. به کمک این دستور، زمانی که صفحه‌ی مرورگر شما در اندازه‌ای کمتر از اندازه‌ی المانتان باشد به صورت خودکار المان شما را تغییر عرض می‌دهد تا دیگر صفحه اسکرول نشود. برای مثال زمانی که اندازه‌ی مرورگر کمتر از ۵۰۰ پیکسل است، عرض المان شما را به مقداری کمتر از ۵۰۰ پیکسل تبدیل می‌کند تا دیگر صفحه اسکرول نشود. این موضوع خصوصا در طراحی صفحات موبایل کاربرد دارد. این دستور همچنین باعث می‌شود که عرض المان شما محدود به عرض حداکثر شود و بیشتر از آن نتوانید بدان عرض بدهید. 

المان ریسپانسیو که با تغییر ابعاد مرورگر تغییر میکند

div.ex2 {    max-width: 500px;     border:  3px solid #8AC007;}