1

我的 index.html 文档的头部中有以下样式表链接代码：

<link href="static/css/mobile.css" rel="stylesheet" media="screen and (max-width: 739px)">

但是，在我的 1920px 宽屏幕上，chrome 和 firefox 都加载了 mobile.css - 它似乎忽略了内容。它只是将渲染页面所需的时间增加了一倍。

如果 CSS 文件无法满足媒体查询，有什么办法可以阻止它加载？（我想我可以忍受一些 .js）还是我实现错了？

浏览器加载文件然后忽略它似乎是完全错误的。

4

2 回答 2

2

恐怕浏览器总是会加载媒体查询，即使它们不匹配。您可以在此处详细了解它：

http://christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries/

在这篇文章中也展示了防止这种情况的方法。简而言之，它将是这样的：

  1. 您使用 JS 而不是 CSS: 的测试查询window.matchMedia('screen and (max-width: 739px)');。
  2. 然后，如果它匹配你添加你的CSS与类似：document.write('<link rel="stylesheet" href="small.css">');

实际文章有更好的方法来包含它document.write，所以你应该检查一下。

于 2013-02-23T16:56:22.720 回答
0

这是我最后使用的。它使用了一些 jquery，但如果需要，您可以将其从 jquery 转换出来。

首先像这样设置html：

<link class="matchmedia" data-href="static/css/mobile.css" data-rel="stylesheet" data-max="739">

data-max 是我们告诉下面的函数检查最大宽度的方式。当函数被调用时，它将查找具有名为“matchmedia”的类的元素，然后测试您在 data-max 和 data-min 中指定的约束，如果它通过这些测试，它将复制其名称的任何属性以“data-”开头并复制值。嘿，我们有条件加载。

ws.width = <your favourite method of getting the width>;

function mediaMatchHTML() {
$(".matchmedia").each(function(){
    var min = this.getAttribute("data-min");    //in pixels
    var max = this.getAttribute("data-max");

    //Check condition
    if ((min === null || ws.width >= min) && (max === null || ws.width <= max)) {
        for (var c=0; c<this.attributes.length; c++) {
            var name = this.attributes[c].name.slice(5);
            if ("data-"+name == this.attributes[c].name) {  //is this lined up for conversion?
                this.setAttribute(name, this.attributes[c].value);
            }
        }
    }
});
}
于 2013-02-27T15:10:33.033 回答