我想在智能手机屏幕上隐藏菜单图标,但媒体查询不起作用。有人能透露一些见解吗?
我试着在这里寻找一些其他的答案,但没有什么真正的帮助,因为我正在检查我的浏览器大小,但我使用的最大宽度,所以它应该仍然显示。
我有三个不同的标志。一个用于台式机,一个用于平板电脑,一个用于移动设备。现在我正试图隐藏我的移动桌面徽标,但它不起作用,所以我想在试图隐藏/显示更多图像之前,我会先找出原因。
更新:已解决。我不知道为什么它会起作用,但经过不断的提神和30分钟后它会起作用。

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

<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

最佳答案

不需要有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:url…”规则前声明另一个“background size”。如果不是,那就可以了,因为它是一个向量,只要比例是正确的。

10-05 20:42
查看更多