我正在尝试使用条件样式表加载。
我有多个具有多个断点的元素。对于每个元素和每个断点，我创建了一个单独的样式表。例如：
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部分。之后， not 合并的样式表将附加到具有明显媒体属性的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);
正如您所看到的，这不是很小，我也不确定您是否可以像我在代码中那样嵌套查询处理程序。是不是有更简单的方法？