Медиа-запросы в 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
Лето в разгаре, а значит самое время задуматься о покупке кондиционера. Но как не потеряться…
Омар Хайям
Настоящий друг — это человек, который в глаза тебе выскажет все, что о тебе думает,…
Полезные советы по выбору раздвижной двери
Следует знать, что функциональность и дизайн работают рука об руку, когда вы используете раздвижную дверь.…