Какой из них правильный? Семантический интерфейс: отзывчивая видимость

Я новичок в семантическом интерфейсе, и я люблю его. У них есть обширная полезная документация, хотя и более запутанная вещь.

Как работает адаптивная видимость?

Есть только [только для мобильного монитора только маленький монитор только для большого монитора] для контейнера... и некоторые из кода, я обнаружил, что был [только компьютер, только устройство]? В чем разница? спасибо.

Ответы

Ответ 1

Обновлено для отражения версии 2.2.4

Отзывчивая видимость работает, скрывая определенный элемент (обычно ui container) на определенных размерах экрана. Например, <div class="ui container mobile only"> будет отображаться только тогда, когда ширина экрана меньше 768 пикселей.

Документация кратко описывает это и определяет ширину экрана по умолчанию:

  • mobile only будет отображаться ниже 768px
  • tablet only будет отображаться только между 768px - 991px
  • small monitor only будет отображаться между 992px - 1200px
  • large monitor only отобразит только 1200px и выше

Однако, как вы упомянули, документация немного устарела и, глядя на самые последние источники, похоже, существует несколько других типов. В текущей версии на github вы можете найти следующее:

  • mobile only будет отображаться ниже 768px
  • tablet only будет отображаться только между 768px - 991px
  • computer only всегда будет отображаться 992px и выше
  • large screen only будет отображаться только между 1200px - 1919px
  • widescreen only будет отображаться только 1920px и выше

Как мне кажется, не существует device only.

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

Ответ 2

<div class="ui container mobile only">

Это не может отображаться ниже 768px.

Правильное выражение ниже:

<div class="ui container mobile only grid">