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

您可以在行动here中看到@import的简单示例。

其他方法

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

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

1 个答案: