Медиа-запросы в 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

Инструкция по скачиванию видео с сервиса 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

Виды и типы компрессионных чулков

Изделия называют компрессионными, когда их применяют для лечения, а также профилактики нарушений кровотока в нижних… Read More

22/08/2020