Semantic UI中比computer更大的设备类是什么？设备类列表在哪？

你遇到的问题是因为Semantic UI 2.4的响应式断点中，computer类的上限是1199px，超过这个宽度后需要使用**large screen和widescreen**这两个更大的设备类。

完整设备类及断点范围 #

Semantic UI 2.4的响应式设备类包含以下5种基础类型，搭配only/not限定类可以实现精准的显示控制：

• mobile：视口宽度 < 768px
• tablet：768px ≤ 宽度 < 992px
• computer：992px ≤ 宽度 < 1200px
• large screen：1200px ≤ 宽度 < 1920px
• widescreen：宽度 ≥ 1920px

代码修改示例 #

针对你的场景，只需添加large screen only和widescreen only的行即可覆盖更大的视口范围：

<div class="ui padded grid">
    <div class="mobile only row">
        <div class="red column">mobile: Maecenas malesuada dui eu interdum </div>
    </div>
    <div class="tablet only row">
        <div class="orange column">tablet: Maecenas malesuada dui eu interdum </div>
    </div>
    <div class="computer only row">
        <div class="green column">computer: Maecenas malesuada dui eu interdum </div>
    </div>
    <div class="large screen only row">
        <div class="blue column">large screen: Maecenas malesuada dui eu interdum </div>
    </div>
    <div class="widescreen only row">
        <div class="purple column">widescreen: Maecenas malesuada dui eu interdum </div>
    </div>
</div>

完整文档位置 #

完整的设备类说明、组合用法（如范围类tablet computer表示平板及以上设备显示）可以在Semantic UI 2.4官方文档的「Responsive」章节中找到。

内容的提问来源于stack exchange，提问作者Oliver Williams