Question

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

是否可以仅在电话上调整透明标题图像的高度，而不会在台式机或平板电脑上弄乱其大小？

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

Answer 1

在实际代码中显示起来会更容易，但是您可以调整大小，仅使其影响您通过媒体查询定义的大小-read more about here

如果查看屏幕截图，您会看到a标签的高度为150px。如果稍加调节，徽标和菜单之间的距离就不会那么远。

以下是一个示例，该示例仅在小于height的尺寸上对.header-image .site-title a进行450px的新更改。

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

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