css - 仅在台式机和笔记本电脑上隐藏图标的媒体查询

Question

我的网页标题中有一个可点击的图标图像；当页面在台式机、笔记本电脑和/或任何更大的屏幕上拉出时，我想隐藏图标图像。但是，我希望在移动设备/手机和手持平板电脑上拉起页面时显示该图标。

这是我尝试过的:

@media screen and (min-width: 0px) and (max-width: 700px) {
  .ghost {
    margin-left: 500px;
    /*show the icon on smaller screen*/
  }
}

@media screen and (min-width: 701px) and (max-width: 1024px) {
  .ghost {
    margin-left: 500px;
    display: none;
    /*hide the icon on larger screens*/
    visibility: hidden;
  }
}

/* Adding this so the demo is visible even though the image link is broken. --editor */
.ghost img { border: 1px solid blue; }

<div style="cursor:pointer;" onclick="openNav()" class="ghost"><img src="img/ic_ghost.svg" alt="ghost" /></div>

...请问我能得到一些帮助吗？ ...谢谢

Answer 1

你好

如果您只想在 <= 700px 的设备上显示图标，您的代码应如下所示。在第一个@media 中设置min-width: 0px，在第二个@media 中设置max-width: 1024px 是不必要的。

@media screen and (max-width: 700px) {
    .ghost {
        margin-left: 500px;

    }
}

@media screen and (min-width: 701px) {

    .ghost {
        margin-left: 500px;
        display: none; /* Acts like this item isn't there at all */
        visibility: hidden; /* Doesn't show the item, but saves space for it */
    }
}

我不知道你的全部问题，但如果你想在大屏幕上表现得好像它不存在，下面的 CSS 会更好;)

.ghost {
    display: none;
}

@media screen and (max-width: 700px) {

    .ghost {
        margin-left: 500px;
        display: initial;
    }
}

---

您可以找到有关媒体查询的更多信息，例如关于这个W3Schools site .

干杯