Используем медиа запросы CSS3 для определения ориентации экрана
Для формирования наиболее подходящего для разных носителей вида шаблона в CSS можно определять различные типы медиа среды (например, экран или печать). CSS3 расширяет возможности типов медиа среды с помощью дополнительных выражений, которые называются медиа запросами. В данном уроке мы рассмотрим использование медиа запросов для определения ориентации шаблона и продемонстрируем их использование.
Ориентация
Медиа запрос ориентации позволяет использовать определённые стили для разных ориентаций экрана. Доступны две опции: landscape и portrait, которые используются для изменения шаблона страницы на основе ориентации экрана браузера.
Браузер или устройство определяет ориентацию страницы по высоте и ширине окна. Если высота больше ширины - используется режим портретной ориентации. Если ширина больше высоты - режим ландшафтной ориентации.
/* Портретная ориентация шаблона */
@media screen and (orientation:portrait) {
/* Стили для портретной ориентации шаблона */
}
/* Ландшафтная ориентация шаблона*/
@media screen and (orientation:landscape) {
/* Стили для ландшафтной ориентации шаблона */
}
В стилях можно задать медиа запрос, который будет определять, для какого типа ориентации, созданы правила.
Демонстрация с хамелеоном
Для демонстрации использования ориентации создана демонстрационная страница с изображением хамелеона, который меняет цвет. В качестве бонуса в браузерах, поддерживающих трансформации CSS3, смена цвета происходит с затуханием.
Как устроена демонстрация
Рассмотрим внутренне устройство демонстрационной страницы.
html { background: #000 url(chameleon2.jpg) 50% 100% no-repeat; }
body { background: url(chameleon.jpg) 50% 100% no-repeat; }
Она состоит из двух изображений хамелеона. Одно - для ландшафтной ориентации страницы, другое - для портретной. Первое изображение используется как фон для тега html, а второе - для тега body.
/* Портретная ориентация*/
@media screen and (orientation:portrait) {
body { opacity: 1; }
}
/* Ландшафтная ориентация*/
@media screen and (orientation:landscape) {
body { opacity: 0; }
}
Для переключения изображений тег body имеет непрозрачность 0 при ландшафтной ориентации и 1 при портретной ориентации.
Затухание при смене цвета
В браузерах , поддерживающих трансформации CSS3, смена ориентации сопровождается плавным затуханием цвета хамелеона.
body {
background: url(chameleon.jpg) 50% 100% no-repeat;
-moz-transition: opacity 1s ease; /* FF3.7+ */
-o-transition: opacity 1s ease; /* Opera 10.5 */
-webkit-transition: opacity 1s ease; /* Saf3.2+, Chrome */
transition: opacity 1s ease;
}
Поддержка браузерами
Медиа запросы по-разному поддерживаются различными браузерами, но определение ориентации работает хорошо в следующих браузерах:
- Safari 4+
- Chrome 4+
- Firefox 3.5+
- Safari iPad
К сожалению Opera 10.5 (Presto 2.5) поддерживает все медиа запросы кроме ориентации.
Бонус: поддержка iPhone
Программное обеспечение iPhone не поддерживает медиа запрос ориентации, а для iPad релиз версии 4.0 отлично работает с ним.
Мы можем имитировать определение ориентации для iPhone с помощью медиа запросов min- и max-width, которые доступны в версиях начиная с 1.0.
/* Портретная ориентация */
@media screen and (max-width: 320px) {
body { opacity: 1; }
}
/* Ландшафтная ориентация */
@media screen and (min-width: 321px) and (max-width: 480px) {
body { opacity: 0; }
}
Так как известно, что максимальная ширина экрана iPhone в режиме портретной ориентации составляет 320px, то мы используем данный факт. Для определения ландшафтной ориентации используется комбинация запросов min/max-width, которая доступна в CSS3. Свойство max-width позволяет избежать неприятных моментов для настольных систем.
Чтобы данные стили работали в iPhone нужно также использовать мета тег viewport:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
Так iPhone будет выводить страницу в действительном масштабе, а не изменять автоматически размер для соответствия разрешению экрана.
Теперь фоновое изображение слишком большое
Использование данного тега приводит к том, что фоновое изображение выводится слишком большим для размеров iPhone. к счастью, есть свойство CSS3 background-size, которое поддерживается iPhone.
@media screen and (max-device-width: 480px) {
html, body {
-moz-background-size: 80% auto;
-webkit-background-size: 80% auto;
background-size: 80% auto;
}
}
Для того, чтобы использовать уменьшение фона с помощью свойства background-size для маленьких экранов, мы задействуем медиа запрос max-device-width, чтобы ограничить область применения масштабирования максимальной шириной экрана в 480px. Затем для тегов html и body мы устанавливаем ширину фона 80% от доступного пространства, а высота будет выставляться автоматически для сохранения пропорций изображения.
Но здесь есть другой момент
Изменение ориентации iPhone, также изменяет размер фонового изображения. Получается, что в ландшафтном режиме фоновое изображение больше, чем в портретном режиме. Для выравнивания размеров изображений мы используем свойство background-size для ландшафтного режима.
@media screen and (min-width: 321px) and (max-width: 480px) {
html, body {
-moz-background-size: 50% auto;
-webkit-background-size: 50% auto;
background-size: 50% auto;
}
body { opacity: 0; }
}
Заключение
Медиа запросы CSS3 позволяют контролировать процесс вывода страницы в зависимости от множества факторов, таких как размер экрана, его ориентация, соотношение сторон и других. Причем поддержка их в браузерах становится все лучше и лучше.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/zv4K1sJbr2I/lessons.php
|
Для формирования наиболее подходящего для разных носителей вида шаблона в CSS можно определять различные типы медиа среды (например, экран или печать). CSS3 расширяет возможности типов медиа среды с |
РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2026-04-17 » Дырявая воронка продаж: где вы теряете клиентов и как это лечит CRM
- 2026-04-17 » ИИ‑контент против человека: как найти золотую середину
- 2026-04-17 » Сайты 2026–2027: почему побеждают простые и быстрые
- 2026-04-17 » Формы сбора согласий на сайте
- 2026-04-17 » Безопасность сайта для малого бизнеса: что нужно знать, чтобы не взломали и не оштрафовали
- 2026-04-16 » Парадокс выбора: почему изобилие вариантов вредит вашей прибыли
- 2026-04-16 » Когнитивная перегрузка vs. UX: почему ваш сайт утомляет мозг пользователя
- 2026-04-16 » Эра Zero-Click: как генеративная выдача изменила путь клиента
- 2026-04-16 » Как адаптировать тексты на сайте под голосовой поиск
- 2026-04-16 » Почему ваш сайт тормозит — и вы теряете клиентов
- 2026-04-08 » Микрофронтенды — максимально простое объяснение
- 2026-04-08 » Чат-боты или живые менеджеры: что выбрать для эффективного продвижения в 2026 году?
- 2026-04-08 » Почему ваш сайт не видно в поисковой выдаче?
- 2026-04-08 » Персонализация в маркетинге: 7 примеров, которые работают
- 2026-04-08 » Как автоматизация маркетинга и продаж помогает компаниям расти быстрее и без хаоса
- 2026-04-01 » Как не переплатить за разработку: скрытые этапы создания сайта, о которых забывают при составлении ТЗ
- 2026-04-01 » Почему не стоит делать сайт «как у конкурента»
- 2026-04-01 » SSL сертификат для интернет‑магазина: почему экономия здесь обходится дороже
- 2026-04-01 » SEO, GEO и бренд: как строить видимость в 2026 году
- 2026-04-01 » Объективные метрики здоровья сайта, которые должен отслеживать каждый бизнес
- 2026-03-27 » Кибербезопасность для малого и среднего бизнеса в 2026 году: как не стать жертвой цифровых угроз
- 2026-03-27 » Объединяем CRM и маркетинговую автоматизацию: как создать единую систему продаж
- 2026-03-27 » Дизайн не главное? Почему сайт теряет клиентов, даже если вы уверены в обратном
- 2026-03-27 » SEO умерло — да здравствует SEO! Как нейросети перестроили поиск
- 2026-03-27 » Почему сайт работает медленно: проблема может быть не в хостинге, а в нагрузке
- 2026-03-13 » Причины, почему вашего сайта нет в поиске и как это исправить
- 2026-03-13 » Как интернет-магазину расти в тени маркетплейсов
- 2026-03-13 » Почему скорость загрузки сайта — это вопрос выживания в 2026 году
- 2026-03-13 » Ошибки навигации в интернет-магазине, которые убивают продажи
- 2026-03-13 » 12 признаков, что ваш сайт безнадежно устарел (и как это проверить)
Жизнь подобна универмагу: в ней находишь всё, кроме того, что ищешь Кроткий Эмиль - (1892—1963) - русский поэт–сатирик, юморист и афорист |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.

Мы создаем практически любые сайты от продающих страниц до сложных, высоконагруженных и нестандартных веб приложений! Наши сайты это надежные маркетинговые инструменты для успеха Вашего бизнеса и увеличения вашей прибыли! Мы делаем красивые и максимально эффектные сайты по доступным ценам уже много лет!
Комплексный подход это не просто продвижение сайта, это целый комплекс мероприятий, который определяется целями и задачами поставленными перед сайтом и организацией, которая за этим стоит. Время однобоких методов в продвижении сайтов уже прошло, конкуренция слишком высока, чтобы была возможность расслабиться и получать \ удерживать клиентов из Интернета, просто сделав сайт и не занимаясь им...
Мы оказываем полный комплекс услуг по сопровождению сайта: информационному и техническому обслуживанию и развитию Интернет сайтов.
Контекстная реклама - это эффективный инструмент в интернет маркетинге, целью которого является увеличение продаж. Главный плюс контекстной рекламы заключается в том, что она работает избирательно.