我正在试验条件样式表加载。
我有多个带有多个断点的元素。对于每个元素和每个断点，我都创建了一个单独的样式表。例如：
navi-00em-30em.css: 一栏导航navi-30em-60em.css: 两栏导航navi-60em-inf.css: 内联导航gal-00em-40em.css: 一栏画廊gal-40em-70em.css: 两列画廊gal-70em-inf.css: 四列画廊
等等……</p>
我通过使用媒体查询将这些样式表添加到我的 head-section。我将它们定义为仅在特定的宽度范围内加载，例如两列导航的样式表具有以下媒体属性：
screen and (min-width: 30em) and (max-width: 59.999999em).
这种技术当然会导致许多丑陋的 HTTP 请求，从而导致性能下降。所以我有了在页面加载时通过 javascript 检测屏幕大小然后加载自定义合并 CSS 文件的想法。在我们的例子中，会有 5 个不同的文件。例如，如果页面加载时屏幕大小为 50em，gal-40em-70em.css并且navi-30em-60em将被合并并附加到 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);
如您所见，这不是很苗条，我也不确定您是否可以像我在代码中那样嵌套查询处理程序。没有更简单的方法吗？