Angular.js使用媒体查询绑定背景图片

Question

我有一个Angular.js应用程序，其中包含动态背景图像（应具有其URL的数据绑定）。我还想使用CSS媒体查询来检测方向/像素密度等。

我找到的唯一解决方案是使用JavaScript为背景图像添加URL，就像这样：

myDiv.css({'background' : 'url('+ scope.objectData.poster +') no-repeat', 'background-size':'auto 100%'});

这样我就必须将所有的媒体查询逻辑传递到javascript中，类似于这样。(我的意图是能够为每个屏幕分辨率、像素密度和方向提供不同的背景图片)

我正在寻找一种更清晰的解决方案，以使用CSS媒体查询，并仍然能够绑定我的图像源。

谢谢！

Yaniv

- Yaniv Efraim

Answer 1

这只是解决问题的起点。您可以使用matchMedia：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/matchMedia。

if (window.matchMedia("(min-width: 400px)").matches) {
    $scope.poster = 'small.png';
} else {
    $scope.poster = 'big.png';
}

现在你可以在HTML文件中使用它：

<div class="moments-preview-image" 
    ng-style="{'background-image': 'url('+poster+ ')'}"> ... </div>

如果您的浏览器不支持这个新的API，您可以查看一些有趣的解决方法：

http://wicky.nillia.ms/enquire.js/

http://davidwalsh.name/device-state-detection-css-media-queries-javascript

- michael

---

matchMedia解决方案对我非常有效（我正在为移动设备开发）。谢谢！ - Yaniv Efraim

@Yaniv Windows Phone 设备怎么样？MDN 表示 IE Mobile 不支持。 - mykola.rykov

哦 - 可能是...我只在iOS和Android设备上进行开发。那么使用Polyfill呢？你有找过吗？（例如：https://github.com/paulirish/matchMedia.js/）。祝好运！ - Yaniv Efraim

哇，从没想到我们可以这样做。我尝试了 ng-style="'background-image','url('+card.thumb+')'" 但失败了，不知道为什么。或许它只支持 {'a':'b'} 这种语法。 - Aero Wang

根据文档，ng-style仅支持评估为{'css属性键'：css值}对象的表达式。 - SStanley