css - 仅针对手机调整标题图像的大小？

Question

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

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

如果需要，您可以在此处查看我的网站。

标签： cssresizewordpress-theming

Answer 1

在实际代码中更容易显示，但您可以调整大小并仅使其影响您使用媒体查询定义的大小 -在此处阅读更多信息

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

这是一个示例，它将使heighton .header-image .site-title aonly on 尺寸小于450px.

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

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