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