В одной из прошлых статей мы уже рассматривали способы достижения адаптивности в веб-дизайне с помощью медиа-запросов 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, не стесняйтесь высказывать их в комментариях ниже. Хорошего настроения!
Содержание статьи Введение: почему цены решают все Что значит сравнение цен с конкурентами 5 причин,…
В последние годы интерес к саунам в Киеве заметно вырос. Это связано не только с…
В современном ритме мегаполиса отдых стал неотъемлемой частью заботы о здоровье и эмоциональном состоянии. Особенно…
В современном мире цифрового маркетинга Facebook (Meta) остается одной из самых мощных платформ для продвижения…
Этот прибор стал незаменимым элементом арсенала представителей множества профессий, но особенно актуален среди военных. Тепловизор…
Постоянный поток новостей, рабочих задач и личных забот часто приводит к тому, что в голове…