使用 javascript 触发媒体查询答案

【问题标题】：Trigger a media query with javascript使用 javascript 触发媒体查询
【发布时间】：2016-09-27 13:59:22
【问题描述】：

是否可以在点击带有 Javascript 的按钮时触发媒体查询@media (max-width: 600px) { .a { ... } }？（没有浏览器宽度真的

// $('#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 jquery css media-queries

【解决方案1】：

您无法使用 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 */ }

【讨论】：