我已按照 CSS-Tricks 上的说明使用多个 .css 文件和 jQuery 根据视口(viewport)宽度更改样式表，但我的代码无法正常工作。我坐在这里分析了一个小时，但无法发现我的错误。任何人都可以看到我做错了什么吗？预先感谢您提供的任何帮助!
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>最佳答案
您可以使用媒体属性:
<link rel="stylesheet" media="(max-width: 900px)" href="small.css" />
<link rel="stylesheet" media="(min-width: 901px)" href="large.css" />
参见 here
关于javascript - 根据视口(viewport)大小切换 CSS 样式表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35511061/