Question

这是我正在更新的WordPress网站。我有两张图片；一种用于大屏幕，另一种用于小屏幕/手机。

我知道我可以通过CSS来做到这一点，但是背景图像是由无法访问CSS的用户更改的。我在Wordpress上创建了一些自定义字段，使他们可以轻松更改图像。

目前，我在PHP页面中具有此功能，该页面仅适用于一张图像：

<div class="block block--overlay" style="background-image: url('<?php echo theme('background_image', 'url'); ?>');">
</div>

拥有这样的东西的最好方法是什么？

<div class="block block--overlay" style="background-image: url('<?php if_large screen: echo theme('background_image', 'url') else echo theme('mobile_background_image', 'url'); ?>');">
</div>

我已经了解了wp_is_mobile（）函数，它不是很可靠，并且无法响应。

我还有什么其他选择？

Answer 1

您可以为esktop和移动版注入css变量，并在css @media查询中使用此变量。

php将如下所示：

<div style="--desktop: url('<?php echo 'https://picsum.photos/id/1/600/400'; ?>'); --mobile: url('<?php echo 'https://picsum.photos/id/1/200/600'; ?>')"></div>

输出应如下所示：

:root {
  --desktop: "placeholder-url";
  --mobile: "placeholder-url";
}
div {
  height: 100vh;
}
@media screen and (max-width:520px) {
div {
  background-image: var(--mobile);
}
}
@media screen and (min-width:520px) {
div {
  background-image: var(--desktop);
}
}

<div style="--desktop: url('https://picsum.photos/id/1/600/400'); --mobile: url('https://picsum.photos/id/1/200/600')"></div>

根据视口宽度动态更改背景图像

1 个答案: