是否可以在使用 Javascript 单击按钮时触发媒体查询 @media (max-width: 600px) { .a { ... } } ？(没有浏览器宽度 真的 < 600px)
// $('#b').click(function(){ // trigger the media query });.a { background-color: green; }
@media (max-width: 600px) {
.a { background-color: yellow; /* many other rules */ }
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="a">Hello</div>
<input id="b" type="button" value="Change" />最佳答案
您无法使用 JavaScript 触发媒体查询样式，但您可以通过使用单独的样式表并修改其 media 属性来启用它们。这就是我的意思:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" media="all" href="regular_styles.css">
<link rel="stylesheet" media="(max-width: 600px)" href="small_screen.css" id="small">
</head>
<body>
<div class="a">Hello</div>
<input id="b" type="button" value="Change" />
<script src="jquery.min.js"></script>
<script>
$('#b').click(function(){
// set the media query perimeter to "all"
$('#small').attr('media', 'all');
});
</script>
</body>
</html>
regular_styles.css
.a { background-color: green; }
small_screen.css
.a { background-color: yellow; /* many other rules */ }
关于javascript - 使用 javascript 触发媒体查询，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37513795/