Медиа-запросы в 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, не стесняйтесь высказывать их в комментариях ниже. Хорошего настроения!
Последние посты
Соломон
Жизнь нас учит, что свою пару мы познаем, когда разводимся, своих братьев мы познаем, когда… Читать далее
Чак Паланик
Кто может — тот делает. Кто не может — тот критикует Чак Паланик Читать далее
Ричард Бах
Ни одно желание не дается тебе отдельно от силы, позволяющей его осуществить. Хотя, возможно, для… Читать далее
Стивен Кинг
Жизнь – это непрерывный опыт, и даже самые плохие моменты занимают свое место в пазле… Читать далее
неизвестный автор
Люди, которые любят одиночество, дорого заплатили за дружбу с кем-то... неизвестный автор Читать далее
Наполеон Хилл
Что разум человека может постигнуть и во что он может поверить, того он способен достичь… Читать далее