Медіа-запити в 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, не соромтеся висловлювати їх в коментарях нижче. Гарного настрою!

Tags: CSS3HTML5

Recent Posts

Опалення і гаряча вода коли треба, а не коли включать

Тепло в домі і гаряча вода в будь-який час для багатьох мешканців багатоквартирних та приватних… Read More

19/09/2020

Інструкція по завантаженню відео з сервісу TikTok (безкоштовно та без watermark)

Якщо ви ще не чули про TikTok, тоді рекомендуємо вам спочатку ознайомитися з цим коротким… Read More

17/09/2020

Що є в бюджетному ноутбуці – на які характеристики розраховувати?

Пройшли ті часи, коли пристойний ноутбук коштував від 1000 доларів. Сьогодні можна купити досить непоганий… Read More

16/09/2020

Що краще: цифрове телебачення Т2 чи інтернет-телебачення

Сучасне життя неможливо уявити без телебачення. Воно дозволяє дізнаватися про події в Україні та світі,… Read More

02/09/2020

Гіпоалергенна подушка. Чому вона важлива?

Зараз знайдеться мало людей, в яких немає алергії на продукти або пилок рослин. Вважається, що… Read More

28/08/2020

Футбольний Інстаграм – що нового у топових футболістів

Деякі відомі футболісти ретельно приховують свої особисте життя, а інші – активно постять фотографії з… Read More

24/08/2020