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

С появлением в 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

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

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



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

Применяем CSS в зависимости от ориентации экрана | | 2013-05-27 08:29:25 | | Статьи Web-мастеру | | С появлением в CSS3 медиа запросов у нас появилась возможность применять CSS в зависимости от ориентации экрана пользователя.Конечно для решения данной задачи можем воспользоваться свойствами | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: