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

Question

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

它会像这样工作吗：

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;
    }
}

或

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

此解决方案的来源： http://timkadlec.com/2012/04/media-query-asset-downloading-results/

但它相当复杂。

简单地使用modernizr来加载所有设置背景图像的css而不是加载多个图像版本是个好主意吗？

Answer 1

一般来说，是的，它会按照您概述的方式工作。

Modernizr

您可以使用 Modernizr 加载 javascript 和 CSS，还可以使用 Modernizr.mq() 方法专门匹配媒体查询。示例：

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（或任何其他资产加载器）来完成所有JS/CSS资产加载是一个只能由你做出的决定，并且你知道：

• 您的应用有多复杂。
• 需要多少资产（图片、脚本、函数等）。
• 复杂程度/互动程度
• 使用modernizr 可以节省什么
• 您的应用/网站的预期用途

媒体查询有什么问题？

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

This is one example [无从属关系] 为不同的设备类型换出不同的图像。只需调整浏览器的大小并查看图像是如何加载的。

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

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

@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：

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

您可以看到@import 的一个简单示例正在运行here。

其他方法

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