0

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

它会像这样工作吗：

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而不是加载多个图像版本是一个好主意吗？

4

1 回答 1

1

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

现代化

您可以使用 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，您将节省什么
  • 您的应用程序/网站的预期用途

媒体查询有什么问题？

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

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

在使用媒体查询方面，简单地说，您可以：

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

@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你可以在这里看到一个简单的例子。

其他方法

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

于 2013-04-23T21:17:47.790 回答