Медиа-запросы в 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, не стесняйтесь высказывать их в комментариях ниже. Хорошего настроения!

Share

Последние посты

Как купить автомобиль на аукционе?

Если вас интересует вопрос, можно ли купить автомобиль на аукционе, вот вам краткий ответ: да.… Читать далее

02/12/2023

Основные критерии при выборе и покупке телевизора

В данном обзоре мы собрали основные советы и критерии по приобретению телевизора, в одном месте,… Читать далее

30/11/2023

На что обратить внимание при выборе фонарика на батарейках

Фонарик на батарейках способен помочь в разных ситуациях, начиная от походов и заканчивая авариями. При… Читать далее

29/11/2023

Всесторонний обзор Apple Watch Series 9: в чем его отличия от других поколений

Последняя презентация американской компании продемонстрировала несколько разнообразных новинок. В частности, в середине сентября 2023 года… Читать далее

24/11/2023

Как утеплить ребенка на зиму с помощью меховых наушников

Голова и уши – это те части тела, которые больше всего нуждаются в тепле зимой.… Читать далее

23/11/2023

Как проходит осмотр у проктолога при различных заболеваниях и как к нему подготовиться?

Проктология специализируется на лечении различных заболеваний ануса и прямой кишки. Такие деликатные проблемы вызывают боли… Читать далее

23/11/2023