GitHub 博客园 Nanakon

-_-#【响应式】matchMedia

谈谈响应式Javascript

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="myDiv"></div>
    <script>
        var result = window.matchMedia("(min-width: 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>

 

posted on 2013-12-22 09:22  jzm17173  阅读(241)  评论(0编辑  收藏  举报

导航

轻音