使用javascript触发媒体查询
当使用Javascript单击按钮时，是否可以触发媒体查询使用javascript触发媒体查询,javascript,jquery,css,media-queries,Javascript,Jquery,Css,Media Queries,当使用Javascript单击按钮时，是否可以触发媒体查询@media（最大宽度：600px）{.a{…}？（浏览器宽度实际上不小于600px） /$（'#b'）。单击（函数（）{//trigger the media query}） .a{背景色：绿色；} @介质（最大宽度：600px）{ .a{背景色：黄色；/*许多其他规则*/} } 你好 不能使用JavaScript触发媒体查询样式，但可以使用单独的样式表并修改其media属性来启用它们。我的意思是： index.html <!
@media（最大宽度：600px）{.a{…}/$（'#b'）。单击（函数（）{//trigger the media query}）
.a{背景色：绿色；}
@介质（最大宽度：600px）{
.a{背景色：黄色；/*许多其他规则*/}
}
你好
不能使用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>
小屏幕。css
.a { background-color: green; }
.a { background-color: yellow; /* many other rules */ }