Используем медиа запросы 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

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Используем медиа запросы CSS3 для определения ориентации экрана | | 2012-06-19 12:03:06 | | Статьи Web-мастеру | | Для формирования наиболее подходящего для разных носителей вида шаблона в CSS можно определять различные типы медиа среды (например, экран или печать). CSS3 расширяет возможности типов медиа среды с | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: