Question

我有一个带有动态背景图像的Angular.js应用程序（应该为其URL设置数据绑定）。我还想使用css媒体查询来检测方向/像素密度等。

我找到的唯一解决方案是使用javascript将URL添加到背景图片，如下所示：

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

这样我就必须将所有媒体查询逻辑传递给javascript，例如this。（我的目的是能够为每个屏幕分辨率/像素密度/方向提供不同的背景图像）

我正在寻找一种更清晰的解决方案来使用css媒体查询，并且仍能够对我的图像源进行数据绑定。

TNX！

Yaniv

Answer 1

这只是解决问题的起点。

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，您可以查看一些有趣的解决方法：