如何在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;
  }
}

我在您的网站上试过这个，这就是我的内容：