css - 仅为手机调整标题图片的大小？

Question

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

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

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

Answer 1

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

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

这里是一个示例，它将在 .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 将结束。这只是一个示例，您可以将其更改为您喜欢的任何内容，当然您也可以添加多个媒体查询。