Структура элементов и адаптивный интерфейс

Материал из XIOT Wiki
Перейти к навигации Перейти к поиску


PRO версия XIOT-EDITOR основана на принципах современной веб-разработки и использует вложенную структуру элементов. Такой подход позволяет проектировать интерфейсы, которые корректно масштабируются, адаптируются под разные устройства и сохраняют стабильный внешний вид при изменении разрешения экрана.

Редактор поддерживает как адаптивные, так и позиционные интерфейсы, а также их комбинирование в рамках одного проекта.

🧱 Вложенная структура элементов

Базовым элементом интерфейса является блок. Каждый блок может содержать внутри себя другие блоки и элементы, формируя иерархическую структуру.

Типовой пример:

  • Страница
    • Основной контейнер
      • Виджет устройства
        • Иконка
        • Название
        • Элементы управления
      • Другой виджет
    • Панель навигации
      • Кнопка «Назад»

Подобная структура полностью аналогична HTML-разметке, где один контейнер (div) может содержать вложенные элементы.

Вложенность элементов является основой адаптивного интерфейса и не зависит от разрешения экрана.

📐 Единицы измерения и масштабирование

В PRO версии используются относительные единицы измерения, рекомендованные для построения адаптивных интерфейсов.

Проценты (%)

Проценты применяются для формирования общей структуры страницы и контейнеров.

Пример:

  • создаются два блока;
  • каждому задаётся высота 50%.

Независимо от устройства:

  • смартфон,
  • планшет,
  • настенная сенсорная панель,

блоки всегда занимают одинаковую долю пространства страницы.

Это базовый принцип адаптивного макета.

Единицы em

Единицы em применяются для размеров виджетов и элементов управления.

Особенности:

  • размеры элементов зависят от значения font-size;
  • при изменении масштаба интерфейса все элементы изменяются пропорционально;
  • сохраняются пропорции, отступы и читаемость интерфейса.

Изменение font-size приводит к масштабированию всего приложения без нарушения структуры.

🧩 Подходы к построению интерфейса

PRO версия XIOT-EDITOR поддерживает два основных подхода к компоновке интерфейса.

🔄 Адаптивный (резиновый) интерфейс

Адаптивный интерфейс строится на:

  • вложенной структуре блоков;
  • использовании % и em;
  • отсутствии абсолютного позиционирования.

Характеристики:

  • автоматическая адаптация под любое разрешение;
  • корректная работа при смене ориентации экрана;
  • единый интерфейс для всех типов устройств.

Данный подход рекомендуется использовать по умолчанию для пользовательских интерфейсов.

📌 Позиционный интерфейс

Позиционный интерфейс применяется в случаях, когда заранее известно разрешение экрана.

Для этого:

  • элементу задаётся CSS-свойство position: absolute;
  • после этого элемент можно свободно перемещать мышью в рабочей области;
  • положение фиксируется относительно страницы.

Такой подход используется для:

  • специализированных экранов;
  • панелей с фиксированной компоновкой;
  • визуальных схем.

🔀 Комбинированный подход

На практике чаще всего используется комбинирование двух подходов.

Рекомендуемая схема:

  • виджет проектируется адаптивным —
 размеры в em,  
 вложенные элементы в % и em,  
 без абсолютного позиционирования;
  • сам виджет размещается на странице с помощью position: absolute.

Преимущества:

  • виджет сохраняет единый внешний вид на любых устройствах;
  • положение на странице задаётся вручную;
  • удобно реализовывать планы этажей, участков и схем помещений.

🎨 CSS-стили и стандарт веб-разработки

PRO версия XIOT-EDITOR использует полноценные CSS-стили, соответствующие стандартам веб-разработки.

Поддерживаются основные группы свойств:

  • размеры и ограничения (width, height, min/max);
  • отступы и поля (margin, padding);
  • шрифты и типографика;
  • позиционирование;
  • фон и цвета;
  • рамки и скругления;
  • тени и прозрачность;
  • анимации и переходы;
  • flex- и grid-компоновка.

Это обеспечивает:

  • предсказуемое поведение интерфейса;
  • высокий уровень гибкости;
  • возможность использовать знания HTML/CSS без переобучения.

🧩 Виджеты как переиспользуемые компоненты

Виджет представляет собой самостоятельный компонент, включающий:

  • структуру элементов;
  • стили;
  • логику;
  • привязки к характеристикам и тэгам.

Виджеты можно:

  • клонировать;
  • переносить между страницами;
  • сохранять в файл;
  • использовать в других проектах.

Один раз созданный виджет может применяться многократно без изменения структуры.

🎯 Итог

PRO версия XIOT-EDITOR предоставляет профессиональные инструменты построения интерфейсов:

  • вложенная иерархия элементов;
  • использование % и em для масштабирования;
  • поддержка адаптивного и позиционного подходов;
  • комбинирование методов в одном проекте;
  • полноценные CSS-стили;
  • переиспользуемые виджеты.

Это позволяет создавать как универсальные пользовательские интерфейсы, так и специализированные инженерные панели без ограничений по устройствам и разрешениям.

Источник — https://wiki.xiot.ru/index.php?title=Структура_элементов_и_адаптивный_интерфейс&oldid=3238