I am building a mobile-first approach website and am deciding on the best technique to conditionally load content.
**Technique 1**
This technique uses [enquire.js](http://wicky.nillia.ms/enquire.js/ “enquire.js”)
along with the following code…
enquire
.register(“(min-width: 500px)”, {
match: function() {
$(“#page”).load(“content.html”);
}
})
.listen();
This solution relies on jQuery and Enquire.js. When page is resized upwards, the new content is downloaded automatically, and when resized downwards, the loaded content remains, and can be removed via display:none, although the code remains in the DOM once loaded.
**Technique 2**
This is the [second technique](https://css-tricks.com/examples/ConditionalCSS/ “second technique”)
This is based on CSS media queries, and seems to be a lot quicker than the first technique, and swaps content at breakpoint. No code is left in the DOM once resized, only the code for that viewport.
I am inclined to go with technique 2, but am not sure if this is the best technique for this. Which would you choose and why?
