javascript - Angular.js 使用媒体查询数据绑定(bind)背景图像

Question

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

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

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

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

我正在寻找一个更简洁的解决方案来使用 css 媒体查询，并且仍然能够对我的图像源进行数据绑定(bind)。

谢谢!

亚尼夫

Answer 1

这只是解决您的问题的起点。

您可以使用 matchMedia:https://developer.mozilla.org/en-US/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