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

Question

使用 Wordpress 主题 Sela 我正在使用背景图片和徽标，我希望让徽标仅在移动屏幕上显示。

网站是 pontifexgrp.com

Answer 1

您在这里尝试利用两个功能，媒体查询和显示设置。媒体查询允许您根据屏幕设置定位设备。首先，您需要@media screen 以确保用户在实际屏幕上查看您的网站，而不是屏幕阅读器或打印的纸。

接下来，您需要指定屏幕尺寸。您可以使用max-width 指定仅适用于小于 的屏幕的规则（对于手机而言），或使用min-width 指定仅适用于屏幕的规则大于您的数字，在您的情况下适用于所有其他设备。考虑到徽标似乎可以按原样工作，不需要让它在它已经存在时出现，否则最好让它消失，所以我会使用min-width: 500px 规则，当屏幕大于时使徽标消失手机屏幕。

最后，有几种不同的方法可以让某物消失，主要是display: none 和visibility: hidden。这两者的区别在于display: none实际上是删除了该项目，所以如果它被主题用来占用空间，这将打破页面。另一方面，visibility: hidden 只是使该项目不可见，但它所占用的任何空间仍会被占用，所以这是更安全的选择。

我检查了您的网站，并且徽标具有 site-logo 类，因此您可以按照以下方式执行您想要完成的操作：

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

我在您的网站上尝试过，结果如下：