jacmaes/gist:80bdb060ea5ebeb782b2

## gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Enquire Test</title>
    <meta name="viewport" content="width=device-width">
    <!-- Normalize CSS -->
    <link rel="stylesheet" src="http://normalize-css.googlecode.com/svn/trunk/normalize.css"/>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css"/>
</head>

<body>
    <div id="result-1">
    </div>

    <div id="result-2">
    </div>

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Enquire.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/enquire.js/2.0.0/enquire.min.js"></script>
<script>
(function () {
        var result1 = $('#result-1')
        var result2 = $('#result-2')

        enquire.register("screen and (max-width: 959px)", {
            deferSetup: true,
            setup: function () {result1.load('ajax/480.html');},
            match: function () {result1.fadeIn();},
            unmatch: function () {result1.hide();}
        });
        enquire.register("screen and (min-width: 960px)", {
            deferSetup: true,
            setup: function () {result2.load('ajax/960.html');},
            match: function () {result2.fadeIn();},
            unmatch: function () {result2.hide();}
        });
})();
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Enquire Test</title>
	<meta name="viewport" content="width=device-width">
	<!-- Normalize CSS -->
	<link rel="stylesheet" src="http://normalize-css.googlecode.com/svn/trunk/normalize.css"/>
	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css"/>
	</head>

	<body>
	<div id="result-1">
	</div>

	<div id="result-2">
	</div>

	<!-- jQuery -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<!-- Enquire.js -->
	<script src="http://cdnjs.cloudflare.com/ajax/libs/enquire.js/2.0.0/enquire.min.js"></script>
	<script>
	(function () {
	var result1 = $('#result-1')
	var result2 = $('#result-2')

	enquire.register("screen and (max-width: 959px)", {
	deferSetup: true,
	setup: function () {result1.load('ajax/480.html');},
	match: function () {result1.fadeIn();},
	unmatch: function () {result1.hide();}
	});
	enquire.register("screen and (min-width: 960px)", {
	deferSetup: true,
	setup: function () {result2.load('ajax/960.html');},
	match: function () {result2.fadeIn();},
	unmatch: function () {result2.hide();}
	});
	})();
	</script>
	</body>
	</html>