Semantic-UI中哪些类可以正确实现响应式可见性？

Question

我刚接触语义化UI，很喜欢这个框架。他们有非常丰富的文档，但也有些困惑。

响应式可见性是如何工作的？

容器有 mobile only tablet only small monitor only large monitor only，而我发现一些代码中还有 computer only, device only？它们有什么区别？谢谢。

- postsrc

---

将文档中的URL添加到未来的参考中会很有帮助。 - Peyman Mohamadpour

Answer 1

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

响应式可见性通过在特定的屏幕尺寸下隐藏某个元素（通常是ui容器，但也可以是如网格行之类的元素）来实现。例如，<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. 所有尺寸 (没有修饰符)

文档没有明确提到设备断点是多少。和大多数东西一样，在构建Semantic UI时可以通过SASS变量进行配置，并且在site.variables中定义。默认断点如下：

1. mobile only仅在小于768px时显示
2. tablet only仅在768px - 991px之间显示
3. computer only始终显示992px及以上
4. large screen only仅在1200px - 1919px之间显示
5. widescreen only仅在1920px及以上显示

如 Grid 的文档所示，可以将它们组合起来使用，例如 tablet mobile only 和 mobile computer only 是完全有效的。

- fstanis

---

在最新版本中，您应该使用“仅大屏幕”而不是“仅大型监视器”。 - Snook

有一件让人困惑的事情是，我的笔记本电脑显示了计算机和宽屏内容，因为它们都属于这两个类别。这是因为计算机只有没有最大宽度。如果我省略了“仅限计算机”，那么我就没有任何东西可以覆盖991-1200像素。 - Andy

这是有意为之，它们并不互斥 - “宽屏幕”是“电脑”的子集，“电脑”实际上只是指“既不是手机也不是平板电脑”。 - fstanis

如果您自己构建语义 UI，则可以更改它们。我更新了回复以包括这一点。 - fstanis

Answer 2

以下内容无法在768px以下显示：

<div class="ui container mobile only">

下面是正确的表达方式：

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

- Keyo

---

感谢@cryptic_star的帮助。我的英语不是很好，请见谅。 - Keyo