Застосовуємо CSS залежно від орієнтації екрану

застосовуємо
орієнтації

З появою в CSS3 медіа запитів у нас з'явилася можливість використовувати CSS залежно від орієнтації екрана користувача.

Звичайно для вирішення цієї задачі можемо скористатися властивостями min-width та max-width, але в цьому уроці розглянемо щось інше.

Орієнтація пристрою

Мобільні пристрої можуть знаходитись у двох положеннях: пейзаж та портрет. Згідно з останніми тенденціями, мобільні пристрої незабаром переженуть звичайні настільні ПК, тому нам потрібно це враховувати та знати, як застосувати стилі, залежно від орієнтації пристрою.

Зробити це можна при підключенні файлів у розділі head:

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

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

залежно

екрану

орієнтації

орієнтації

застосовуємо

екрану

Даний урок підготовлений для вас командою сайту ruseller.com Джерело уроку: http://www.hongkiat.com/blog/css-orientation-styles/ Переклав: Станіслав Протасевич Урок створений: 18 Травня 2013 Переглядів: 29445 Правила передруку

5 останніх уроків рубрики "CSS"

Смішні ефекти для літер

Невеликий ефект з інтерактивною анімацією букв.

Реалізація кумедних підказок

Невеликий концепт кумедних підказок, які реалізовані на SVG та anime.js. Крім особливого стилю у прикладі реалізовано анімацію та трансформацію графічних об'єктів.

Анімовані літери

Експеримент: анімовані букви SVG на базі бібліотеки anime.js.

Сонцезахисні окуляри від першої особи

Прикольний експеримент веб сторінки, відображення якої здійснюється “відпершої особи” через сонцезахисні окуляри.

Навігація, що розкривається

Експериментальний скрипт навігації, що розкривається.