Создание альбомной и портретной верстки с использованием HTML и CSS

Question

У меня есть требование, где мне нужно написать HTML / CSS, который должен отображать альбомную ориентацию и портрет в зависимости от ориентации iPad, то есть сначала я хочу написать это с использованием HTML и CSS, а затем использовать егодля разработки iPad.

Мой вопрос: каков наилучший способ добиться этого?Имеет ли смысл иметь два разных html / css файла и загружать их в зависимости от ориентации устройства или есть какой-то другой способ реализовать это.Любая информация относительно этого будет оценена.

Спасибо Raaks

Answer 1

Вы хотите использовать адаптивный веб-дизайн для достижения этой цели.Вы можете определить, какие стили применять в зависимости от размера экрана.Помните, что экран шире, когда он в портретном режиме.

Что вы делаете, вы создаете две разные таблицы стилей.Один для портрета, а второй для пейзажа.Затем вы используете медиазапросы CSS3 для переключения между ними.

Пример кода:

Портрет:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 768px)" href="portrait.css" />

Пейзаж:

<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 1024px)" href="landscape.css" />

Как видите, вы передаете целевой носитель и объявляете целевую ширину для каждой таблицы стилей.Портретная таблица стилей будет применяться только в том случае, если текущая ширина экрана меньше или равна 768 пикселям.И наоборот, вторая таблица стилей будет применяться только в том случае, если разрешение экрана не менее 1024 пикселей в ширину.

Простое руководство, описывающее метод.

оригинальная статья A List Apart, описывающая методику.

Теперь, если под разработкой для iPad вы подразумеваете нативные приложения, это не будет работать.Для нативных приложений вам нужно использовать инфраструктуру какао, чтобы определить ориентацию устройства.Однако, если вы просто используете веб-просмотр в нативном приложении, тогда это будет работать нормально.

Надеюсь, это поможет.