Question

我已经按照CSS-Tricks的说明使用多个.css文件和jQuery根据视口宽度更改样式表，但我的代码无效。我坐在这里分析了一个小时，并且无法发现我的错误。谁能看到我做错了什么？提前感谢您提供的任何帮助！

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>

Answer 1

您可以使用媒体属性：

<link rel="stylesheet" media="(max-width: 900px)" href="small.css" />
<link rel="stylesheet" media="(min-width: 901px)" href="large.css" />

请参阅here

根据视口大小切换CSS样式表

1 个答案: