enquire.js:在页面加载时检查查询，然后销毁处理程序

Question

我正在试验条件样式表加载。

我有多个元素和多个断点。对于每个元素和每个断点，我创建了一个独立的样式表。例如：

• navi-00em-30em.css：一列导航
• navi-30em-60em.css：两列导航
• navi-60em-inf.css：内联导航
• gal-00em-40em.css：一栏画廊
• gal-40em-70em.css：两栏画廊
• gal-70em-inf.css：四柱画廊

…等

我使用媒体查询将这些样式表添加到我的首页。我将它们定义为仅在特定的宽度范围内加载，例如，用于两列导航的样式表具有以下媒体属性：screen and (min-width: 30em) and (max-width: 59.999999em)。

当然，这种技术会导致许多丑陋的HTTP请求，从而导致性能下降。因此，我想通过页面加载上的javascript来检测屏幕大小，然后加载一个自定义合并的CSS文件。在我们的例子中，会有5个不同的文件。例如，如果页面加载时屏幕大小为50em，则gal-40em-70em.css和navi-30em-60em将合并并附加到head部分。之后，没有合并的样式表将被附加到head部分，并带有明显的媒体属性。

我怎么能这么做？

一种方法

由于我在网站上使用enquire.js，所以我认为使用该脚本是明智的。一个可能的解决方案是(未经测试的！)：

query1 = "screen and (max-width: 29.999999em)",
query2 = "screen and (min-width: 30em) and (max-width: 39.999999em)",
query3 = "screen and (min-width: 40em) and (max-width: 59.999999em)",
query4 = "screen and (min-width: 60em) and (max-width: 69.999999em)",
query5 = "screen and (min-width: 70em)";
handler1 = {
  match : function() {
    loadCSS('css/merge.php?q=00em-30em'); 
    enquire
      .unregister( query1, [ handler1,
                             handler2,
                             handler3,
                             handler4,
                             handler5
                           ])
      .unregister( query2, [ … ])
      .unregister( query3, [ … ])
      .unregister( query4, [ … ])
      .unregister( query5, [ … ]);
    }
};
handler2 = {
  match : function() {
    loadCSS('css/merge.php?q=30em-40em'); 
    enquire
      .unregister( … ) …;
    }
};
/* and so on */
enquire.register(query1, handler1);
enquire.register(query2, handler2);
enquire.register(query3, handler3);
enquire.register(query4, handler4);
enquire.register(query5, handler5);

正如您所看到的，这并不是非常苗条，我也不确定您是否可以嵌套查询处理程序，就像我在代码中所做的那样。有没有更简单的方法？

Answer 1

好的，找到一个已经在做这件事的工具。