طراحی وب واکنشگرا (Responsive Web Design)
طراحی وب واکنشگرا (Responsive Web Design)
طراحی وب واکنشگرا روشی در طراحی وب است که باعث میشود صفحات وب در انواع دستگاهها و اندازههای صفحه نمایش به خوبی نمایش داده شوند و کار کنند. هدف این است که صفحات وب بدون نیاز به نسخههای جداگانه برای موبایل، تبلت و دسکتاپ، روی همه دستگاهها زیبا و کاربردی باشند.
مدیا کوئریها چیستند؟
مدیا کوئریها یک قابلیت CSS هستند که به شما اجازه میدهند تا بر اساس ویژگیهای دستگاه یا پنجره مرورگر، مانند:
-
عرض یا ارتفاع صفحه نمایش
-
جهت (افقی یا عمودی)
-
وضوح تصویر
-
نسبت ابعاد
استایلهای متفاوتی تعریف کنید و ظاهر سایت را با توجه به دستگاه تغییر دهید.
ساختار پایه مدیا کوئریها
@media (شرط) {
/* قوانین CSS اینجا نوشته میشود */
}
مثال: تغییر رنگ پسزمینه در صفحه نمایشهای کوچک
/* استایل پیشفرض */
body {
background-color: white;
}
/* برای صفحه نمایشهایی که عرض آنها ۶۰۰ پیکسل یا کمتر است */
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
دیدگاهتان را بنویسید