Медіа-запити в 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, не соромтеся висловлювати їх в коментарях нижче. Гарного настрою!
This post was last modified on 05/06/2017 19:58
Останні пости
Генрі Форд
Людина має два мотиви поведінки — один справжній та інший, що гарно звучить Генрі Форд…
Фрідріх Ніцше
Не треба додумувати надто багато. Так ви створюєте проблеми, яких не існувало Фрідріх Ніцше
Такий різний інвертор! Вибираємо між кондиціонерами Inverter, Inverter DC та Full DC
Літо в розпалі, а значить якраз час задуматися про покупку кондиціонера. Але як не загубитися…
Корисні поради щодо вибору розсувних дверей
Варто знати, що функціональність і дизайн працюють рука об руку, коли ви використовуєте розсувні двері.…