使用JavaScript触发媒体查询

Question

使用JavaScript触发媒体查询

4

是否可以使用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" />

- Basj

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- blex · Accepted Answer

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