Question

我有以下代码

<nav class="blue">
  <a href="#!" class="brand-logo center">Logo</a>
</nav>

我的代码中只有居中的徽标。但是，当我在移动设备上查看此代码时，导航栏的高度变得非常小。为什么响应类在这种情况下不起作用？

请注意，我并不关心将导航栏元素折叠到sidenav。现在，导航栏本身在移动设备上看起来非常小（高度），这让我觉得某些响应性内容丢失了。

作为我的问题的一个例子，我附上了这个codepen。尝试通过水平调整大小以不同的分辨率渲染它，导航栏在较小的设备上的高度会变短。

编辑1：如果您查看下面的屏幕截图，不仅导航栏没有响应，而且页面上的整个内容都没有响应。

Answer 1

通常将此元标记添加到您的<head>即可解决问题：

<meta name="viewport" content="width=device-width, initial-scale=1">

但是我遇到了一个问题，尽管我添加了这个meta标签，但似乎不遵守它。导航栏仍然太宽。

原因是页面上有一个元素，其宽度大于100％的宽度，并且尽管有溢出：隐藏，但该宽度仍会弯曲页面宽度。

我更改了该元素，一切都很好。

Answer 2

@media only screen and (min-width: 601px)
materialize.css:4477
nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i {
    height: 64px;
}

这是materialize.css文件中的规则。它适用于601px或更高的宽度。

nav {
    height: 56px;
}

默认值为600px或更低。也许试试

nav {
    height: 64px;
}

保持一致？

Answer 3

我弄清楚问题是什么。我在页面上遗漏了meta viewport标记。

基本上只需添加它就可以了：

<meta name="viewport" content="width=device-width, initial-scale=1">

这允许现有的媒体查询（由materializecss本身提供的查询）按预期正常工作。

实现css响应导航栏不能在移动设备上工作

3 个答案: