有条件加载内容的技术有哪些？

Question

我正在建立一个移动优先的方法网站，并决定采用有条件加载内容的最佳技术。

技术1

这种技术使用enquire.js

用下面的代码沿着...

enquire 
    .register("(min-width: 500px)", { 
    match: function() { 
     $("#page").load("content.html"); 
    } 
    }) 
    .listen(); 

该解决方案依赖于jQuery和Enquire.js。当页面向上调整大小时，新内容会自动下载，当向下调整大小时，加载的内容将保留，并且可以通过display：none删除，尽管代码在加载后仍保留在DOM中。

技术2

这是第二technique

我也做了第二次技术here的codepen，使用警报，而不是实际内容

这是基于CSS媒体查询，并且似乎比第一种技术快得多，并且在断点处交换内容。调整大小后，没有代码留在DOM中，只有该视口的代码。

我倾向于采用技术2，但我不确定这是否是最好的技术。你会选择哪一个，为什么？

Answer 1

CSS媒体查询是去（我总是twitter bootstrap使用它们）的方式，但如果你需要下面IE9的支持，我宁愿推荐enquire.js解决方案

更多有关兼容性的信息：http://caniuse.com/css-mediaqueries