Angular.js使用媒体查询对背景图像进行数据绑定
我有一个带有动态背景图像的Angular.js应用程序（应为其URL进行数据绑定）。我也想使用css媒体查询以检测方向/像素密度等。
我发现的唯一解决方案是使用javascript将URL添加到背景图片，如下所示：
myDiv.css({'background' : 'url('+ scope.objectData.poster +') no-repeat', 'background-size':'auto 100%'});
这样，我必须将所有媒体查询逻辑传递给javascript，类似这样的东西。（我的意图是能够为每个屏幕分辨率/像素密度/方向提供不同的背景图像）
我正在寻找一种更清洁的解决方案以使用CSS媒体查询，并且仍然能够对图像源进行数据绑定。
tnx！
亚尼夫
问题答案：
这只是解决您的问题的起点。
您可以使用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
-
问题内容： 我有一个div 使用以下css： 我注意到，当我调整浏览器的大小时，会看到“移动”背景（很好），但是如果回过头来使浏览器变大，则以前的“大”背景并不会总是重新出现。 这是一个间歇性问题，但经常发生，以至于我认为应该解决。 是否有任何方法可以解决此“背景图像不出现”问题或调整背景图像的大小，以便媒体查询“收缩”背景图像以适应新的大小？据我所知，没有（广泛）的方法来更改背景图像的大小… 问
-
我正在构建一个自定义的wordpress主题，并想为我的客户提供通过WP中的媒体管理器上传背景图像的能力。 然而，我无法确定如何使用CSS访问图像。我认为将url设置为wp内容中的UPLOADS文件夹很简单。 但是，媒体管理器不会将所有图像转储到一个目录中，而是按月份和年份组织它们。 如何确定媒体库中特定图像的路径？
-
问题内容： 我有此jquery代码，可在单击时更改背景图像： 但是，它没有改变。有什么我想念的吗？ 问题答案： 您需要包括该属性的一部分。
-
除了背景颜色，也可以使用背景图像来实现各种复杂、有趣的背景效果。CSS中，使用 background-image属性来定义背景图像的路径，取值为 none | url，默认值为 none。 url 可以是相对路径，也可以是绝对路径。使用相对路径时，url 是相对于 css 所在的文件，而不是要设置样式的HTML文件。如，下面代码表示，使用 css 文件所在目录下的 img 文件夹下的图像 bg.g
-
主要内容：1. 媒体类型,2. 媒体特性,3. 逻辑操作符,4. 定义媒体查询随着移动设备的快速普及，用户不再只是通过传统的电脑系来浏览 Web 内容，越来越多的用户开始使用各种尺寸的智能手机、平板电脑或者其它设备来浏览 Web 内容，为了确保使用不同设备的用户都能拥有不错的体验就需要用到媒体查询。 媒体查询是 CSS 样式表最重要的功能之一，所谓媒体查询指的就是根据不同的媒体类型（设备类型）和条件来区分各种设备（例如：电脑、手机、平板电脑、盲文设备等），并为它们分别定义不
-
响应式网站设计只有弹性布局这一个技巧是不够用的，媒体查询（ media queries ）也是响应式设计的核心技巧之一。媒体查询是可应用于 CSS 样式的简单过滤器。有了这些过滤器，我们可以根据设备呈现内容的特点轻松更改样式，包括显示屏类型、宽度、高度、方向甚至是分辨率。 在 CSS2.1 中定义了媒体类型，通过给 元素添加 media 属性，可以为不同的媒体类型加载不同的样式表。 <link r