我可以使用Modernizer有条件地加载背景css图像吗？

我希望在不同的设备宽度上有不同大小的图像，有时根本没有图像，以节省移动用户的带宽

它会像这样工作吗

Modernizr.load([{
    test: 1025 > window.screen.width, 
  yep: "mobile.css", 
  nope: "desktop.css" 
}]);

我还发现了以下纯css解决方案，据称该解决方案有效，仅在需要时加载图像：

<div id="test3">
    <div></div>
</div>
#test3 div {
    background-image:url('images/test3.png');
    width:200px;
    height:75px;
}
@media all and (max-width: 600px) {
    #test3 {
        display:none;
    }
}

#测试3分区{
背景图片：url（'images/test3.png'）；
宽度：200px；
高度：75px；
}
@全部和全部介质（最大宽度：600px）{
#测试3{
显示：无；
}
}

或

@介质和全部（最小宽度：601px）{
#测试5{
背景图片：url（'images/test5desktop.png'）；
宽度：200px；
高度：75px；
}
}
@全部和全部介质（最大宽度：600px）{
#测试5{
背景图片：url（'images/test5 mobile.png'）；
宽度：200px；
高度：75px；
}
}

此解决方案的来源：

但它相当复杂

---

简单地使用modernizr加载所有css（设置背景图像）是否是一个好主意？

概括地说，是的，它将按照您概述的方式工作

现代化

您可以使用Modernizer加载javascript和CSS，但也可以使用该方法专门匹配媒体查询。例如：

Modernizr.load([{

    // Test if media query matches
    test : Modernizr.mq('only screen and (max-width: 600px)'),

    // load css and js purely for mobile
    yep: ['/assets/mobile.css', '/assets/mobile.js']

  }]);

如果您有两个媒体查询（桌面和移动），那么您只需测试这两个查询并加载所需的资产——或者——更改上述内容以包括以下内容，因为它与测试条件不匹配：

    nope: ['/assets/desktop.css', '/assets/desktop.js']

使用modernizr（或任何其他资产加载器）来fullfil所有JS/CSS资产加载是一项只能由您在了解以下信息的情况下做出的决定：

• 你的应用程序有多复杂
• 需要多少资产（图像、脚本、函数等）
• 复杂程度/互动性
• 如果您使用Modernizer，您将节省什么
• 应用程序/网站的预期用途

媒体查询有什么问题吗？

如果您的站点/应用程序占用空间没有那么大，那么单独使用媒体查询来调整不同设备类型的布局（更重要的是体验）没有什么错；事实上，这是一种更简单的方法，不太复杂，更符合响应性设计理论

[无关联]为不同的设备类型交换不同的图像。只需调整浏览器的大小，看看图像是如何加载的

就使用媒体查询而言，简单地说，您可以：

在一个样式表中包含媒体查询：

@media only screen and (max-width: 600px) {
    #test5 {
      background-image:url('images/mobile.png');
      width:200px;
      height:75px;
  }
}
@media only screen and (min-width: 601px) {
    #test5 {
      background-image:url('images/desktop.png');
      width:200px;
      height:75px;
  }
}

或者，链接到单独的CSS文件：

<link rel="stylesheet" type="text/css" media="screen and (max-width: 600px)" href="mobile.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 601px)" href="desktop.css" />

您可以看到一个简单的

@import

示例

其他方法

---

还有其他更复杂的方法，使用evenListeners来监听屏幕宽度的变化，这些变化将根据查询状态的变化加载/卸载脚本，但对于绝大多数项目，它们太过分了。

你应该使用媒体查询。合乎逻辑的回答应该是谷歌媒体查询，看看它们都是关于什么的。这是关于加载图像的，我很清楚媒体查询是关于什么的。thx，我认为我会使用媒体查询并将ie条件css用于IE8我认为这可能是最简单的方法，并且已经被确立为惯例：）问题是，从我问题中的链接可以明显看出，移动浏览器可能会下载所有css和背景图像，即使每个媒体查询针对不同的设备，除非您以非常特定的方式使用媒体查询。即便如此，一些浏览器，如fennec，仍然会下载所有内容。我想知道导入解决方案是否是这样工作的。我想我会试试看。

<link rel="stylesheet" type="text/css" media="screen and (max-width: 600px)" href="mobile.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 601px)" href="desktop.css" />

@import url(mobile.css) (max-width:600px);
@import url(desktop.css) (min-width:601px);