这是我正在更新的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()函数的文章，发现它不是很可靠，而且不能响应性地工作。
我还有别的选择吗？
您可以为esktop和mobile版本注入一个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>
输出应该是这样的:
null
: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>