在 Semantic-UI 中，哪些响应式可见性是正确的 类？

Which are the correct classes for responsive visibility in Semantic-UI?

我是语义新手-UI，我喜欢这个框架。虽然他们有大量有用的文档，但更多的是令人困惑的东西。

响应式可见性如何工作？

容器有mobile only tablet only small monitor onlylarge monitor only...还有一些代码，我发现有computer only, device only？有什么不同？谢谢。

已更新以反映当前文档和版本 2.4.2

响应式可见性通过在特定屏幕尺寸上隐藏特定元素（通常是 ui container，但也可以是例如网格行）来工作。例如，<div class="ui container mobile only"> 仅在屏幕宽度小于 768px 时显示。

Grid 的文档有一个 Device Visibility 部分演示了几种可能的可见性修饰符：

  1. 手机（mobile only）
  2. 平板电脑（tablet only）
  3. 平板电脑和手机（tablet mobile only）
  4. 计算机（computer only）
  5. 大屏幕（large screen only）
  6. 宽屏 (widescreen only)
  7. 所有尺寸（无修饰符）

文档没有明确提及设备断点是什么。像大多数东西一样，它们可以在构建语义 UI 时通过 SASS 变量进行配置，并在 site.variables 中定义。默认断点是：

  1. mobile only只会显示768px以下
  2. tablet only只会显示768px - 991px
    3. 之间
  3. computer only会一直显示992px及以上
  4. large screen only只会显示1200px - 1919px
    5. 之间
  5. widescreen only只会显示1920px及以上

如 Grid 文档中所示，也可以将它们结合起来 - 例如tablet mobile only 和 mobile computer only 完全有效。

768px 以下无法显示：

<div class="ui container mobile only">

正确的表达方式如下：

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