仅针对手机调整 header 图片？

Question

我在 Wordpress 网站上工作，我有一个背景图像作为我的徽标，而我的实际 header 图像是透明的。由于 header 图片在移动设备上调整大小的方式，在 phone 上查看时，我的徽标（背景图片）和下面的所有内容之间有一个很大的空白 space。在台式机和平板电脑上看起来很棒。

有没有一种方法可以只在 phone 上调整透明 header 图像的高度，而不会弄乱它在台式机或平板电脑上的大小？

如果需要，您可以view my site here。

Answer 1

在实际代码中会更容易显示，但您可以调整大小，并且只影响您使用媒体查询定义的大小 - read more about here

如果您查看屏幕截图，您会发现 a 标签的高度为 150 像素。如果稍微调整一下，logo和菜单之间的space就不会那么远了。

这里是一个示例，它将在 .header-image .site-title a 上对 height 进行新的更改，但仅适用于小于 450px 的尺寸。

@media screen and (max-width: 450px) {
    .header-image .site-title a {
        height: 100px;
    }
}

max-width 表示当屏幕小于 450px 时，min-width 就结束了。 这只是一个示例，您可以将其更改为您喜欢的任何内容，当然您也可以添加多个媒体查询。