媒体查询仅首先获取 class

Question

相关代码：

body {
  margin: 0;
  padding: 0;
  font-family: "font";
}
#wrapper{
  margin-left:auto;
  margin-right:auto;
  width:1920px;
}

.navbar {
  background-color: rgb(0, 0, 0);
  height: 3.5em;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 1;
}

.navbar .navbar-links {
  font-size: 2em;
  border: none;
  outline: none;
  float: right;
  margin: 0.25em 2em 0 0;
  color: white;
  text-decoration: none;
  background-color: inherit;
  font-family: inherit;
  transition: ease-in-out 0.5s;
}

.navbar #Name {
  float: left;
  margin-left: 3em;
}

@media only screen and (max-device-width:600px) {
  .navbar .navbar-links {
    width: 100%;
    margin: 0;
  }
  .navbar #Name {
    margin-left: 0;
  }
}

<div id="wrapper">
  <div class="navbar">
    <a href="#Hero" id="Name" class="navbar-links">NAME</a>
    <a href="#Projects" id="Project" class="navbar-links">Projecten </a>
    <a href="#Contact" id="Contacting" class="navbar-links">Contact</a>
  </div>
</div>

代码片段： https://jsfiddle.net/Nemoko/rcus95q0/

问题

我的问题是，当我在计算机上查看我的导航栏时，它显示的是正常的导航栏，
我使用 width:100%; margin:0; 使其响应。现在的问题是我的名字还有一个 margin-left.

澄清一下

不是小白的问题space。问题是我的文本“namee”留有边距，但我希望边距在移动设备上消失。不知何故，这不起作用。

我试过的

使用 margin:0; 删除边距，但我的网站没有注册它。
正在检查是否是缓存问题，但是网站上的 CSS 文件显示了代码行
使用ctrl+f5
使用 max-width 而不是 device-max-width 但这也没有真正帮助。
在浏览器中手动更改 margin:0;。这样可行。所以代码没有错

这是它在移动设备上查看时注册的唯一媒体查询：

我还添加了我的 body 样式以供将来参考。

Answer 1

使用 max-width:600px 而不是 max-device-width:600px - 大多数移动设备具有更高的屏幕分辨率（比 CSS 宽度高 2 到 3 倍） - max-device-width:600px具有像素比 1:2 的设备将导致仅在 300 像素 (CSS) 宽度以下应用，这小于当今大多数智能手机的宽度。

如果您更改媒体查询中的规则，则该规则适用。

要去除左侧的小空白，添加 body { margin: 0; } 以重置正文的默认边距。

https://jsfiddle.net/24cyrjt0/

媒体查询仅首先获取 class

Media query only picks up first class

css

media-queries

responsive