Materialise 响应实用程序不工作

Question

我不明白为什么 "show-on-small" 等实用程序不起作用。尽管下面的脚本应该只显示在小屏幕上，但它一直显示（请注意其他物化类工作，所以并不是我不能访问他们的文件）。

示例：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

<div class="show-on-small"> <p  style="color: black" class="show-on-medium">Only smaall</p></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

有什么想法吗？非常感谢！

Answer 1

您可以使用 hide-on-med-and-up，它为宽度大于 601 像素的屏幕设置 display: none。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/><!-- Do you have this line? -->
  </head>
    
  <body>
    <div class="hide-on-med-and-up">Only smaall</div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
  </body>
</html>

他们的文件可以在 https://github.com/Dogfalo/materialize 找到。您也可以从那里做出贡献。

Answer 2

通过查看 .show-on-small 的作用，我们可以清楚地看到它从不隐藏元素。它只确保它显示在 small:

@media only screen and (max-width: 600px) {
  .show-on-small{
    display:block !important
  }
}

因此下一个示例将起作用：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

<p class="show-on-small" style="display:none;">I only show on small</p>

... 因为它在所有情况下都有 display:none，除了在小情况下它被 Materialize 的 CSS 和 !important 覆盖。

请注意，您还可以在 Materialise 中使用 .hide-on-* 类，它可以满足您的需求。

Answer 3

仅在移动设备上显示 .hide-on-med-and-up 它会起作用

Materialise 响应实用程序不工作

Materialize's responsive utilites not working

html

css

materialize