Медиафункция CSS `vertical-viewport-segments`

vertical-viewport-segments — CSS-медиафункция, которая определяет, имеет ли устройство заданное количество вертикально (сверху вниз) расположенных сегментов области просмотра.

Связанная с API сегментов области просмотра, функция vertical-viewport-segments может использоваться для создания адаптивных дизайнов, которые хорошо работают на устройствах с несколькими областями просмотра — устройствах с дисплеем, разделённым на логически отдельные сегменты области просмотра, например на складных устройствах или устройствах с шарниром.

Синтаксис

Медиафункция vertical-viewport-segments задаётся значением <integer> 1 или больше, представляющим количество вертикальных сегментов области просмотра устройства.

• Значение будет равно 1 для:
  • Нескладного устройства (например, обычного смартфона или планшета с одним экраном).
  • Складного устройства, которое разложено или закрыто (в continuous положении устройства).
  • Устройства с двумя экранами и шарниром или складного устройства, которое сложено и расположено горизонтально, так что сегменты находятся рядом друг с другом.
• Значение будет равно 2 для устройства с двумя экранами и шарниром или складного устройства, которое сложено (в folded положении устройства) и расположено вертикально, так что сегменты находятся один над другим.
• Значение может быть больше 2 для складных устройств с несколькими сгибами.

Примеры

Базовое использование vertical-viewport-segments

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

Мы задаём для верхнего контейнера высоту, равную высоте верхнего сегмента (env(viewport-segment-height 0 0)), а для нижнего контейнера — высоту, равную высоте нижнего сегмента (env(viewport-segment-height 0 1)).

Чтобы вычислить высоту сгиба между ними, мы вычитаем смещение нижнего края верхнего контейнера из смещения верхнего края нижнего контейнера (calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0));).

.wrapper {
  height: 100%;
  display: flex;
}

@media (vertical-viewport-segments: 2) {
  .wrapper {
    flex-direction: column;
  }

  .list-view {
    height: env(viewport-segment-height 0 0);
  }

  .fold {
    width: 100%;
    height: calc(
      env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0)
    );
    background-color: black;
  }

  .detail-view {
    height: env(viewport-segment-height 0 1);
  }
}

Полностью работающий пример см. в нашей демонстрации API сегментов области просмотра (исходный код). Также ознакомьтесь с разделом Использование API сегментов области просмотра, где подробно объясняется демонстрация.

Спецификации

Совместимость с браузерами

См. также

• horizontal-viewport-segments @media медиафункция
• API сегментов области просмотра
• Origin trial для Foldable APIs на developer.chrome.com (2024)