Question

我有一个WordPress网站，我在其中使用了适用于桌面的标题图片：http://fortyfourth.co.uk

但是，在移动设备上，图像根本不能正常工作。

是否可以仅为移动设备使用自定义标题图片？我对WordPress（以及编码的任何元素）都很陌生，所以，如果可能的话，如果你能告诉我在哪里以及如何添加自定义代码，那就太棒了。

谢谢，瑞恩

Answer 1

标题图片在您网站的移动视图中看起来不错，但如果您想在页面中使用其他背景图片，请使用此css规则：

@media screen and ( max-width: 425px ){ 
  .page-id-155 .ewf-header-image-option{
      background-image: url("http://fortyfourth.co.uk/wp-content/uploads/2018/02/YOUR_NEW_IMAGE_NAME.png") !important;
      max-height: 150px !important;
      background-position: 49% 0px !important;
  }
}

而不是此http://fortyfourth.co.uk/wp-content/uploads/2018/02/YOUR_NEW_IMAGE_NAME.png使用您的新图片完整网址。

在我们定义的这一行中，您的图片会发生变化：@media screen and ( max-width: 425px ){。 max-width: 425px表示对于宽度小于425px的所有屏幕。您可以根据需要更改它。

max-height: 150px !important;表示图像高度的部分不会超过150像素，您可以使用所需的高度更改150像素。

关于background-position，您可以了解here。

代码转到Customize -> Additional Css。

Answer 2

我使用CSS尝试了此操作，完全按照书面规定和几种变体进行，但无济于事。

我最终使用了https://wordpress.org/support/topic/setting-a-different-header-image-for-mobile/

上的PHP mod

我最终不得不重新调整备用图像的大小，这导致页面上的其余图像被缩放。但是我认为我有解决方案。

我希望这会有所帮助。

WordPress：移动+桌面的不同标题图像

2 个答案: