-_-#【响应式】matchMedia

谈谈响应式Javascript

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="myDiv"></div>
    <script>
        var result = window.matchMedia("(min- 600px)")
        console.log(result)
        result.addListener(sizeChange)
        function sizeChange(r) {
            console.log(r)
            var v = document.getElementById("myDiv")
            if (r.matches) {
                v.innerHTML = "getting big" + "<br>" + result.media
            } else {
                v.innerHTML = "getting small" + "<br>" + result.media
            }
        }
        sizeChange(result)
    </script>
</body>
</html>
原文地址:https://www.cnblogs.com/jzm17173/p/3485778.html