哪一个是正确的？语义UI：响应可见性

Question

我是semantic-UI的新手，我喜欢这个框架。他们有大量有用的文档，更令人困惑的事情。

响应式可见性如何运作？

容器中只有[仅手机平板电脑只有小型显示器只有大型显示器] ...而且有些代码，我发现有[只有电脑，只有设备]？有什么区别？谢谢。

Answer 1

已更新，以反映当前的文档和版本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. computer only将始终显示 992px及以上
4. large screen only只显示介于1200px - 1919px
5. widescreen only只会显示 1920px及以上

如Grid的文档中所示，也可以将这些组合在一起 - 例如tablet mobile only和mobile computer only完全有效。

Answer 2

这不能显示在768px以下：

<div class="ui container mobile only">

正确的表达方式如下：

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