Angular.js使用媒体查询数据绑定背景图像

Question

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

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

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

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

我正在寻找一个更清洁的解决方案来使用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，您可以查看一些有趣的解决方法：