کوئری‌های رسانه‌ای CSS

/* برای صفحات بزرگ‌تر از 600px (معمولاً تبلت‌ها و دسکتاپ‌ها) */

@media (min-width: 600px) {

        body {

                  background-color: lightblue;

       }

}

/* برای صفحات کوچک‌تر از 600px (معمولاً دستگاه‌های موبایل) */

@media (max-width: 599px) {

          body {

                background-color: lightcoral;

       }

}

شرایط رایج در کوئری‌های رسانه‌ای:

• min-width: زمانی که عرض نمای صفحه بزرگ‌تر یا برابر با عرض مشخص شده باشد، استایل‌ها اعمال می‌شوند.
• max-width: زمانی که عرض نمای صفحه کوچک‌تر یا برابر با عرض مشخص شده باشد، استایل‌ها اعمال می‌شوند.
• min-height: زمانی که ارتفاع نمای صفحه بزرگ‌تر یا برابر با ارتفاع مشخص شده باشد، استایل‌ها اعمال می‌شوند.
• max-height: زمانی که ارتفاع نمای صفحه کوچک‌تر یا برابر با ارتفاع مشخص شده باشد، استایل‌ها اعمال می‌شوند.
• orientation: می‌تواند portrait یا landscape باشد که جهت‌گیری دستگاه را شناسایی می‌کند.

مثال با شرایط متعدد:

/* استایل‌ها برای صفحات بزرگ‌تر از 600px و در جهت افقی (landscape) */

@media (min-width: 600px) and (orientation: landscape) {

          body {

             background-color: lightgreen;

       }

}