Html 如何使徽标在500px屏幕尺寸下可见，而在501px屏幕尺寸上不可见？

使用Wordpress主题Sela 我使用的背景图像和标志，我期待使标志只显示在手机屏幕上

---

该网站是pontifexgrp.com

您试图利用这里的两个功能，即媒体查询和显示设置。媒体查询允许您根据屏幕设置以设备为目标。首先，您需要

@media screen

，以确保用户在实际屏幕上查看您的站点，而不是在屏幕阅读器或打印纸上

接下来，您需要指定屏幕大小。您可以使用

max width

指定仅适用于小于您的号码的屏幕的规则（对于手机），或者使用

min width

指定仅适用于大于您的号码的屏幕的规则（对于所有其他设备）。考虑到logo似乎是按原样工作的，不需要在它已经存在时让它出现，最好让它消失，否则，我会使用

minwidth:500px

规则，当屏幕大于手机屏幕时，让logo消失

最后，有几种不同的方法可以使某些东西消失，主要是

显示：无

和

可见性：隐藏

。这两者之间的区别在于

display:none

实际上删除了该项，因此如果主题使用该项来占用空间，则会破坏页面。另一方面，

visibility:hidden

只会使项目不可见，但它占用的任何空间仍会被占用，因此这是更安全的赌注

我检查了您的站点，并且该徽标具有类

站点徽标

，因此您可以按照以下方式完成您想要完成的任务：

@media screen and (min-width: 500px) {
  .site-logo {
    visibility: hidden;
  }
}

我在你的网站上尝试了这个，结果如下：

---

使用媒体查询，这里有大量的教程。试一试，一旦你真的尝试过某样东西就回来。：）很感谢你，我在这类事情上总是遇到麻烦！>我要用这个作为将来的参考！谢谢,谢谢!！我对@media感到困惑，因为我对使用它们很陌生。。不过我会继续学习的，你肯定给了我一个很好的教训。