در این قسمت از آموزش css قصد داریم تا نحوه تغییر عرض در المان ها را بیان کنیم. همچنین در این قسمت یاد می گیریم که چگونه کاری کنیم که نمایش المان هایی با عرض زیاد در صفحه نمایش های کوچک تر مشکلی نداشته باشد. در واقع المان ها را ریسپانسیو می کنیم.
مثال زیر یک المان div را با عرض ثابت و غیر ریسپانسیو نشان می دهد:
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #8AC007;
}
اگر عرض مرورگر کمتر از 500 پیکسل باشد صفحه اسکرول می خورد. برای رفع این مشکل باید از خاصیت max-width استفاده شود.با استفاده از این خاصیت در صورتی که عرض مرورگر کمتر از المان باشد عرض المان به صورت خودکار تغییر می کند تا دیگر صفحه اسکرول نخورد. این دستور همچنین باعث می شود که عرض المان شما محدود به حداکثر شود و نتوانید عرض بیشتری به آن بدهید. حال در مثال فوق به جای ;width:500px دستور زیر را قرار دهید.
max-width:500px;
دیدگاه خود را بنویسید