Медіа-запити в 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, не соромтеся висловлювати їх в коментарях нижче. Гарного настрою!
Останні пости
Як вибрати ідеальний ноутбук: Повний гайд
Вибір ноутбука може бути складним завданням у світі, де ринок переповнений варіантами на будь-який смак… Читати далі
Томас Едісон
Наш великий недолік в тому, що ми занадто швидко опускаємо руки. Найбільш діючий метод досягти… Читати далі
Найкрасивіші та найбільш вражаючі мости з усього світу (ТОП-10)
Міст — це щось більше, ніж просто споруда, яка поєднує два береги. Для того, щоб… Читати далі
Соломон
Життя нас вчить, що свою пару ми пізнаємо, коли розлучаємося, своїх братів ми пізнаємо, коли… Читати далі
Річард Бах
Жодне бажання не дається тобі окремо від сили, що дозволяє його здійснити. Хоча, можливо, для… Читати далі