Информационный портал

Информационно-новостной портал

Новости рекламы и маркетинга. Новости Интернета.
Море полезной информации на сайте RetailDepartment.ru
Поделиться ссылкой с друзьями

Применяем CSS в зависимости от ориентации экрана

Twitter
Нравится
RedLine

С появлением в CSS3 медиа запросов у нас появилась возможность применять CSS в зависимости от ориентации экрана пользователя.

Конечно для решения данной задачи можем воспользоваться свойствами min-width и max-width, но в этом уроке рассмотрим нечто другое.

Ориентация устройства

Мобильные устройства могут находиться в двух положениях: пейзаж и портрет. Согласно последним тенденциям, мобильные устройства вскоре перегонят обычные настольные ПК, поэтому нам нужно это учитывать и знать, как применить стили, в зависимости от ориентации устройства.

Сделать это можно при подключении файлов в разделе head:

<link rel="stylesheet" media="all and (orientation:portrait)" href="/portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="/landscape.css">

Данные стили сработают для таких устройств как iPad, iPhone, Android, Safari, и Firefox. Также, для достижения точно такого же результата, можем воспользоваться медиа запросами:

@media all and (orientation:portrait) {
	/* стили для портрета */
}
@media all and (orientation:landscape) {
	/* стили для пейзажа */
}

Демонстрация

iPhone (Portrait)

iPhone (Landscape)

iPad (Portrait)

iPad (Landscape)

Desktop (Portrait)

Desktop (Landscape)


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/_aN_vce_mX4/lessons.php

Add comment

Правила добавления комментариев


Security code
Refresh

Download SocComments v1.3