یکی از موضوعاتی که در اچ‌تی‌ام‌ال یاد گرفته‌ایم استفاده از عرض و طول برای المان‌های دارای اندازه همچون div است. در واقع شما می‌توانید برای عکس‌ها یا دیویژن‌های خود اندازه تعیین کنید. برای مثال داریم:
HTML
المان غیر ریسپانسیو که با تغییر ابعاد مرورگر تغییر نمی کند
CSS
div.ex1 {
width: ۵۰۰px;
margin: auto;
border: ۳px solid #8AC007;
}
المان غیر ریسپانسیو که با تغییر ابعاد مرورگر تغییر نمی کند
چون عرض المان شما بیشتر از ۵۰۰ پیکسل است و عرض مرورگر شما کمتر از ۵۰۰ پیکسل است، مشکلی که پیش می‌آید این است که صفحه‌ی شما اسکرول خواهد شد. پنجره‌ی مرورگر خود را کوچک کنید تا بهتر این موضوع را مشاهده کنید.
برای رفع این مشکل باید از خاصیت max-width در سی‌اس‌اس استفاده کرد. به کمک این دستور، زمانی که صفحه‌ی مرورگر شما در اندازه‌ای کمتر از اندازه‌ی المانتان باشد به صورت خودکار المان شما را تغییر عرض می‌دهد تا دیگر صفحه اسکرول نشود. برای مثال زمانی که اندازه‌ی مرورگر کمتر از ۵۰۰ پیکسل است، عرض المان شما را به مقداری کمتر از ۵۰۰ پیکسل تبدیل میکند تا دیگر صفحه اسکرول نشود. این موضوع خصوصا در طراحی صفحات موبایل کاربرد دارد. این دستور همچنین باعث می‌شود که عرض المان شما محدود به عرض حداکثر شود و بیشتر از آن نتوانید بدان عرض بدهید.
HTML
المان ریسپانسیو که با تغییر ابعاد مرورگر تغییر میکند
CSS
div.ex2 {
max-width: ۵۰۰px;
border: ۳px solid #8AC007;
}
