Question

在手机上查看时，我一直试图调整我们网站的徽标大小（https://jodhpurhomeservices.com/），但似乎没有代码可行。我尝试了不同的版本，但无济于事：

＆＃13;

@media (max-width: 360px) {
    .site-branding img {
        max-width: 50%;
        max-height: 50%;
    }
}

＆＃13;

我不确定要调整什么或者我应该使用哪些CSS代码？而且我真的不想在桌面视图上更改任何内容。只是移动。

欢迎任何反馈。

Answer 1

您的网站似乎使用优化插件，考虑在将CSS代码添加到自定义CSS部分或主题的CSS文件后清除缓存以查看效果。

您只需要定义宽度或最大宽度，高度就可以自动处理。

@media (max-width: 360px) {
    .site-branding img {
        max-width: 50%;
        height: auto;
    }
}

Answer 2

代码看起来很好。它仅适用于低于360px的分辨率，或者如果需要可以将其更新为767，因为低于ipad的分辨率它只能是移动设备。所以你不需要添加max-height。只有这段代码可以帮到你。您可以更新您选择的分辨率。我检查了你的网站，这个css代码不存在。

@media (max-width: 767px) {
  .site-branding img {
    max-width: 50%;
  }
}

Answer 3

我认为应该但是您的上述样式似乎不适用https://jodhpurhomeservices.com/您可以改进媒体查询，如下所示

@media only screen and (max-device-width: 480px) {

}

你确定你的css上传了，因为我在这里试了https://jodhpurhomeservices.com/wp-content/cache/autoptimize/css/autoptimize_8c2977c29238748881af21a29e97e157.css，但我没有找到site-branding的媒体查询。

Answer 4

请针对不同的屏幕尺寸尝试以下代码。

@media (max-width: 767px) {
  .site-branding a img {
      width: 50%;
   }
}
@media (max-width: 360) {
  .site-branding a img {
      width: 23%;
   }
}

您可能不需要 767px 代码，但上面的代码将以百分比（％）减小宽度，它在 767px中看起来很奇怪在屏幕尺寸时。

如何调整wordpress网站移动版的徽标大小？

4 个答案: