Question

我想在智能手机屏幕上隐藏我的菜单图标，但媒体查询不起作用。任何人都可以提出一些见解吗？

我尝试在这里查看其他一些答案，但没有什么真正帮助，因为我通过重新调整浏览器的大小来检查它，但我使用max-width所以它仍然应该显示。

我有三个不同的徽标。一个用于桌面，一个用于平板电脑，一个用于移动现在我试图隐藏我的移动桌面徽标并且它没有工作，所以我想在尝试隐藏/显示更多图像之前我会尝试找出原因。

更新：已解决。我不确定它为什么会起作用但经过不断刷新后30分钟后它才有效。

＆＃13;

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
    #menu-logo {
        display: none;
    }
}

＆＃13;

<div id="header" class="header">
    <a href="/index.html"><img id="menu-logo" src="../images/logo.svg"/></a>
    <a href="/index.html"><img id="menu-logo-semi" src="../logo-semi.svg"/></a>
    <a href="/index.html"><img id="menu-logo-small" src="../logo-short.svg"/></a>
</div

＆＃13;

Answer 1

原因很可能是由于CSS特性以及样式表中的事物顺序。我们需要查看影响＃menu-logo项目的所有CSS，以及img，尤其是默认（即非媒体查询）CSS，以及影响此菜单徽标项目的任何其他媒体查询。

我们还需要知道这些CSS是在媒体查询之前还是之后 - 事情的顺序非常重要。（注意：我知道这会是一个更好的评论而不是一个完整的答案，但我还没有足够的代表！）

所以看一下特殊性和顺序，然后如果仍然使用flummoxed给我们更多的CSS（或者如果它不太长的话，还是整个样式表）。

Answer 2

没有必要有3个链接。

更好的方法如下：

<div id="header" class="header">
    <a class="logo" href="/index.html">My cool name</a>
</div>

<style>
<!-- Desktop -->
.logo {
  display: block;
  text-indent: -9999px;
  width: 200px;
  height: 82px;
  background: url(logo.svg);
  background-size: 100px 82px;
}

<!-- Tablet -->
@media all and (max-width: 64em) and (min-width: 48em) {
.logo {
  width: 80px;
  height: 60px;
  background-size: 80px 60px;
}
}

<!-- Mobile -->
@media all and (max-width: 48em) {
.logo {
  width: 50px;
  height: 30px;
  background-size: 50px 30px;
}
}
</style>

清洁代码..只需根据需要更改徽标大小。

修改的我不知道您的徽标在每个屏幕分辨率间隔内是否可视。如果是这样，请在“background-size”之前在每个媒体查询上声明另一个“background：url ...”规则。如果没有，只要比例正确，它就可以了，因为它是一个矢量。

遇到css媒体查询问题

2 个答案: