—»     —»   Используем Media Queries ориентирование в CSS3
  Раздел: CSS/Style Sheets   Нет комментариев  

Используем Media Queries ориентирование в CSS3



Долгое время у нас была возможность форматировать различные типы медиа-файлов при помощи CSS. Наиболее популярными из них считаются print и screen. С появлением CSS3, эти возможности были расширены, и теперь мы имеем гораздо больший контроль над форматированием различных медиа-файлов. В этой статье мы сфокусируемся на ориентировании Media Query, а также продемонстрируем вам эти функции в действии.

Ориентирование

Ориентирование Media Query позволяет нам определить конкретное форматирование относительно текущей ориентации дисплея устройства. У нас есть 2 параметра: landscape (альбомная) и portrait (портретная) – они позволяют нам изменять разметку страницу, руководствуясь ориентацией окна браузера.

Браузер или устройство определяет ориентацию дисплея по анализу ширины и высоты окна. Если значение высоты больше, чем значение ширины, то ориентация окна будет портретной. Если наоборот, то альбомная.

/* Portrait */
@media screen and (orientation:portrait) {
    /* Portrait styles */
}
/* Landscape */
@media screen and (orientation:landscape) {
    /* Landscape styles */
}

В пределах нашего CSS мы можем указать нашему Media Query, чтобы он определял тип дисплея и его ориентацию.

Хамелеон

Используем Media Queries ориентирование в CSS3

Для того чтобы продемонстрировать применение ориентирования Media Query, мы сложили вместе пример того, как изменения в ориентации дисплея будут отображать цвет изображения-хамелеона, и в качестве бонуса пример того, как в современных браузерах, при помощи CSS3, реализуются привлекательные цветовые переходы в момент изменения ориентации.

Посмотрите на демо-файл CSS3 Chameleon и не забудьте изменить размер своего браузера, чтобы увидеть функцию в действии. Для более привлекательных результатов, советуем вам использовать браузер из семейства WebKit, типа Safari или Chrome. Вы также можете скачать демо-файлы отсюда: css_chameleon.zip [134,94 Kb] (cкачиваний: 72).

Разберем демо

Давайте подробнее разберем представленное выше демо.

html { background: #000 url(chameleon2.jpg) 50% 100% no-repeat; }
body { background: url(chameleon.jpg) 50% 100% no-repeat; }

Оно состоит из 2-х изображений хамелеона. Одно для альбомной ориентации, и одно для портретной. С 1 изображением, примененным в роли фона к тегу HTML, и со вторым, к части body.

/* Portrait */
@media screen and (orientation:portrait) {
    body { opacity: 1; }
}
/* Landscape */
@media screen and (orientation:landscape) {
    body { opacity: 0; }
}

Для переключения между изображениями, тэг body имеет параметр прозрачности 0, если браузер в альбомной ориентации, и значение 1, если браузер в портретной ориентации. Таким образом мы без труда сможем переключаться между изображениями.

Затухание при смене цвета

Если вы ознакомились с демо-файлом посредством браузера, в котором есть поддержка переходов CSS3 (Safari, Chrome), то вероятно вы заметили, что во время изменения ориентации происходит гладкая перемена цветов хамелеона.

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;
}

Для того, чтобы получить такой плавный переход, мы применили его к тэгу body и, посредством простой функции тайминга, сделали так, чтобы уровень прозрачности менялся в течение 1 секунды.

Как только переход был применен к body поверх ориентирования media queries, будет вызвано затухание или появление, в зависимости от ориентации браузера.

Поддержка браузеров

* Safari 4+
* Chrome 4+
* Firefox 3.5+
* Safari iPad

Все браузеры, указанные выше (кроме Firefox 3.5), также поддерживают переходы CSS3. Firefox 3.7, тем не менее, уже имеет такую поддержку, но она пока что в стадии зарождения.

К сожалению, Opera 10.5 (Presto 2.5) поддерживает все параметры media queries, за исключением ориентирования. Надеемся, что этот недочет вскоре будет исправлен.

Бонус: поддержка для iPhone

На момент написания статьи, последняя прошивка iPhone все еще не имела данной поддержки, но так как iPad поддерживает эту функцию, то наверняка стоит ожидать ее в следующей прошивке iPhone.

А пока что мы можем заменить определение ориентации в iPhone функциями Media Query – min и max-width, которые полностью доступны еще с версии 1.0.

/* Portrait */
@media screen and (max-width: 320px) {
    body { opacity: 1; }
}
/* Landscape */
@media screen and (min-width: 321px) and (max-width: 480px) {
    body { opacity: 0; }
}

Так как нам известно, что максимальная ширина iPhone в портретной ориентации составляет 320 пикселей, то мы можем использовать преимущество применения портретных стилей. Для определения альбомной ориентации, мы применяем комбинацию min/max-width, и так как CSS3 позволяет нам пользоваться цепочками функций вместе, то нам остается заверить устройство в том, что min-width ровняется 321 пикселю, так что стиль не применится в портретной ориентации. Max-width устанавливается на 480 пикселей, что составляет максимальную ширину дисплея iPhone при альбомной ориентации.

Для того чтобы эти стили работали на iPhone, нам также нужно настроить мета-тэг окна просмотра.

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

Это принудит iPhone генерировать страницу в ее текущем размере, а не подгоняя веб-сайт под размеры дисплея. Теперь фоновое изображение слишком велико.

Установив мета-тэг, мы подгоняем фоновое изображение под размеры дисплея. К счастью, есть такая функция CSS3 – background-size, которую iPhone уже поддерживает.

Используем Media Queries ориентирование в CSS3

@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 для более маленьких устройств типа iPhone, нам нужно воспользоваться функцией Media Query – max-device-width, посредством которого мы сможем определить устройства с максимальной шириной дисплея в 480 пикселей. Затем, как в html, так и body, нам нужно установить background-size с 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; }
}

Мы внесем незначительное изменение в Media Query ориентирование альбомного режима iPhone. Вместо ранее указанных 80% доступного значения ширины, мы укажем 50%, что оставит изображение в том же размере, как и в портретном режиме.

Заключение

Media Query в CSS3 привносят значительный контроль и силу относительно отображения веб-страниц на мобильных устройствах, основываясь на размерах дисплеев, ориентации, соотношении сторон и т.д.

Мы всего лишь постарались немного объяснить принцип работы Media Query. По ходу того, как новые версии браузеров будут поддерживать все новые и новые функции, функции Media Query также будут расти.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, Media Query, iPhone
Опубликовал Mysterious Master   Прочитано (раз): 11234   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Май 2019    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728293031