如何使用Timber模板引擎将CSS中的ACF图像字段与媒体查询一起使用（）

我正在使用Tiber编写wordpress主题, 并且关于移动和台式机上的不同图像有一个非常有趣的案例。
案例：我想使用Wordpress中的Advanced Custom Field PRO上传2张图片(移动版和桌面版), 并在自定义Timber模板引擎主题中使用它们。
代码如下：
。枝条

< div class="application--main-image"> < /div>

.scss

.application-main-image { background-position: center bottom; background-repeat: no-repeat; background-image: url('../img/mobile.png'); @media (min-width: 600px) { background-image: url('../img/desktop.png'); } }

我发现我应该使用内联样式将{{post.image}}放在背景图像中, 但是媒体查询呢？
我是否应该使用< style> < / style> 在.twig文件中创建一些自定义属性或样式, 但是我想使用scss, 所以情况并非如此。
你将如何解决该问题？
#1这肯定是一个独特的用例, 这是我对如何处理此问题的看法：

< style> .application--main-image { background: url('https://source.unsplash.com/500x500/?ocean'); /* The actual URL would be replaced by your ACF Filed {{ post.mobile_image }} */ }@media (min-width: 600px) { .application--main-image { background: url('https://source.unsplash.com/500x500/?mountain'); /* The actual URL would be replaced by your ACF Filed {{ post.desktop_image }} */ } }< /style> < div class="application--main-image"> < /div>

我认为你是对的, 因为你需要将标记和所需的CSS添加到.twig模板中。我知道你想使用.scss, 但是你实际上只需要更改背景图像属性。我创建了一个JS小提琴来向你展示我的意思。
https://jsfiddle.net/robertguss/2kacx91k/7/
希望对你有所帮助。如果你已经提出了不同于我的解决方案, 请在此处分享, 这样我不仅可以学习, 而且将来也可以学习。
【如何使用Timber模板引擎将CSS中的ACF图像字段与媒体查询一起使用（）】干杯。