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

Recent Posts

Вільям Шекспір

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

18/04/2021

Що подарувати друзям на річницю весілля

Люди, між якими є любов і взаєморозуміння, скріплюють стосунки й народжують новий союз, а дату… Read More

13/04/2021

Авторитетність домену та його вплив на SEO просування сайту

Для якісного SEO (пошукової оптимізації, розкрутки сайту) одним з важливих показників є Авторитет домену (Domain… Read More

27/03/2021

Як вивести гроші з PayPal – основні способи

З'ясування того, як вивести свої гроші з PayPal, є одним з перших питань, які бентежать… Read More

26/03/2021

Як вибрати спідницю під свою фігуру – основні поради

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

25/03/2021

Основні методи лінкбілдінгу: як отримати якісні зовнішні посилання на сайт

Пошукові системи (наприклад, Google) перевіряють технічні характеристики вашого сайту, такі як швидкість завантаження, зручність навігації,… Read More

24/03/2021