I've tried to implement the method from CSS-Tricks that allows for changing stylesheets based on the viewport width using multiple .css files and jQuery. However, my code isn't functioning as expected. I've spent the past hour trying to figure out where I've gone wrong, but I'm unable to identify the error. Could someone please lend a hand in pointing out what I might be doing incorrectly? Any assistance provided would be greatly appreciated!
function adjustStyle(width) {
width = parseInt(width);
if (width > 901) {
$("#size-stylesheet").attr("href", "large.css");
} else {
$("#size-stylesheet").attr("href", "small.css");
}
}
$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
});body {
background-image: url(large_pic.jpg);
}<!DOCTYPE html>
<html>
<head>
<title>Practice Responsiveness</title>
<link rel="stylesheet" type="text/css" href="large.css" />
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="small.css" />
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="practice.js"></script>
</head>
<body>
</body>
</html>