html - 使用 office-ui-fabric 的 ms-hidden 类的问题

Question

我正在使用 office-ui-fabric-react (v7.22.1) 为我的应用程序设置网格布局样式。对于我的移动样式，我使用 ms-hidden 类来显示/隐藏不同分辨率的东西。

基本上我有2个div：

• div class="ms-hiddenLgDown" --> 期望隐藏到 1024px 的分辨率。
• div class="ms-hiddenXlUp --> 期望在分辨率高于或等于 1024px 时隐藏。

除了屏幕宽度恰好为 1024 像素外，它似乎可以正常工作。在这种情况下，它们都是隐藏的。我检查了面料款式，发现如下：

• ms-hiddenLgDown 有一个“显示：无”，分辨率为 0 - 1023,99999
• ms-hiddenXlUp 对于分辨率 1024 有一个“显示：无” - ....

我希望精确到 1024 的分辨率 ms-hiddenXlUp 应该处于活动状态，而 ms-hiddenLgDown 不应该处于活动状态。我看到的是这两个类都有效地隐藏了两个 div。

我正在使用 chrome 进行测试。

下面的代码显示了我的 html 标记：

<header> 
  <div class="ms-HiddenLgDown">
    <div class="ms-Grid">
        <div class="ms-GridRow">
            ...      
        </div>
    </div>
  </div>
  <div class="ms-HiddenXlUp">
    <div class="ms-Grid">
        <div class="ms-GridRow>
            ...      
        </div>
    </div>
</div>

标签： htmlcssreactjstypescriptoffice-ui-fabric