语义用户界面中的响应性可见性的正确类是什么？ [英] Which are the correct classes for responsive visibility in Semantic-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时才会显示。

网格的文档有一个Device Visibility部分，它演示了几个可能的可见性修饰符：

1. 移动(mobile only)
2. Tablet(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及以上

如网格的文档所示，也可以将它们组合在一起-例如，tablet mobile only和mobile computer only是完全有效的。

这篇关于语义用户界面中的响应性可见性的正确类是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！