Nano Hash - криптовалюты, майнинг, программирование

Создание ландшафтного и портретного макета с использованием HTML и CSS

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

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

Спасибо, Раакс.

html css landscape portrait
06.01.2012

  • Есть ли причина, по которой стандартная гибкая компоновка вам не подойдет? 06.01.2012

Ответы:


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 вы имеете в виду нативные приложения, то это не сработает. Для нативных приложений вам необходимо использовать структуру какао, чтобы определить ориентацию устройства. Однако, если вы просто используете веб-просмотр в собственном приложении, это будет работать нормально.

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

06.01.2012
  • Обратите внимание, что существует специальный медиа-синтаксис для проверки того, является ли экран альбомным или книжным — @media (orientation: landscape) { ... 06.10.2020
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..