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

Question

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

响应能见度如何运作？

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

Answer 1

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

响应可见性通过ui container在特定屏幕尺寸上隐藏某个元素(通常是a ,但也可以是例如网格行)来工作.例如,<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完全有效.