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

demosourse

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.hongkiat.com/blog/css-orientation-styles/
Перевел: Станислав Протасевич
Урок создан: 18 Мая 2013
Просмотров: 34325
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 18 Мая 2013 21:24
    eldar143205
    Думаю, что пригодится.
  • 18 Мая 2013 22:08
    sam2019
    ну не знаю... :) но спасибо за труды
  • 19 Мая 2013 07:06
    mywebdevelop
    Спасибо! Давно нужен был такой урок!
  • 20 Мая 2013 09:32
    micha
    Коротко и ясно. Спасибо.
  • 20 Мая 2013 12:16
    userseal
    "чтобы увдеть эффект" Может увИдеть?
  • 20 Мая 2013 16:34
    popropusku
    Ребята, сорри, я не по теме, но спрошу: есть ли у кого горизонтальная менюшка, с раскрывающимся вверх подменю?
    • 29 Мая 2013 06:35
      ololo_trololo_vk
      popropusku, горизонтальное меню с выпадающим подменю - это редкостный дефицит во всем интернете. Оно стоит сотни, а то и тысячи y.e
^ Наверх ^