Медіа-запити в CSS для респонсивного дизайну
В одній із минулих статей ми вже розглядали способи досягнення адаптивності в веб-дизайні за допомогою медіа-запитів CSS3.
За допомогою CSS медіа-запитів веб-дизайнери можуть створювати стилі для певних пристроїв, а також при виконанні певних умов (наприклад, при певній ширині, висоті або орієнтації екрану пристрою).
У цій публікації ми розглянемо приклади найбільш часто використовуваних медіа-запитів в веб-дизайні.
/* ----- Настільні комп'ютери та ноутбуки ----------- */@media only screen and (min-width: 1224px) { /* ваші CSS-стилі тут */} /* ----- Девайси з великими екранами ----------- */@media only screen and (min-width: 1824px) { /* ваші CSS-стилі тут */} /* ----- Смартфони (орієнтація екрану Portrait і Landscape) ----------- */@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { /* ваші CSS-стилі тут */} /* ----- Смартфони (орієнтація екрану Landscape) ----------- */@media only screen and (min-width: 321px) { /* ваші CSS-стилі тут */} /* ----- Смартфони (орієнтація екрану Portrait) ----------- */@media only screen and (max-width: 320px) { /* ваші CSS-стилі тут */} /* ----- iPhone 5 (орієнтація екрану Portrait і Landscape)----------- */@media only screen and (min-device-width: 320px) and (max-device-width: 568px) { /* ваші CSS-стилі тут */} /* ----- iPhone 5 (орієнтація екрану Landscape)----------- */@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) { /* ваші CSS-стилі тут */} /* ----- iPhone 5 (орієнтація екрану Portrait)----------- */@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) { /* ваші CSS-стилі тут */} /* ----- iPad-и (орієнтація екрану Portrait і Landscape) ----------- */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { /* ваші CSS-стилі тут */} /* ----- iPad-и (орієнтація екрану Landscape) ----------- */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { /* ваші CSS-стилі тут */} /* ----- iPad-и (орієнтація екрану Portrait) ----------- */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { /* ваші CSS-стилі тут */}
Браузерна підтримка медіа-запитів
CSS медіа-запити підтримуються в Chrome 1+, Firefox 3.6+, Internet Explorer (IE) з версії 9+, Opera 10+, Safari 4+, а також в смартфонах та інших мобільних пристроях.
Якщо у вас є корисні ідеї про використання медіа-запитів в CSS, не соромтеся висловлювати їх в коментарях нижче. Гарного настрою!
Останні пости
Сомерсет Моем
Подорослішавши, ви збагнете, що світ стає стерпним за однієї умови: коли розумієш, що людський егоїзм… Читати далі
Михайло Грушевський
Всі вчаться своєї рідної мови, а наша біда така, що треба вчитися її більше, ніж… Читати далі
ТОП-5 покерних обмінників
Професійний покер – це численні турніри та великі гроші, що потребує правильного налаштування фінансових інструментів.… Читати далі
Гай Юлій Цезар
Всі довкола прагнуть винищити ворогів, а не об'єднатися з друзями Гай Юлій Цезар Читати далі
Як вибрати оптимальний смартфон для дитини?
Сьогоднішні діти стикаються з технологіями вже в ранньому віці, і смартфон давно перестав бути просто… Читати далі
Вибираємо електроскутер: важливі критерії та характеристики
Років 20 тому спостерігався пік популярності скутерів із двигуном внутрішнього згоряння (ДВЗ). Маленькі, юркі, з… Читати далі