<p>如果可视区域(viewport)小于或等于 700px，背景会变成黄色，否则会变成粉红色。</p>

<p><strong>重置浏览器窗口大小查看效果。</strong></p>

function myFunction(x) {

    if (x.matches) { // 媒体查询匹配

        document.body.style.backgroundColor = "yellow";

    } else {

        document.body.style.backgroundColor = "pink";

    }

}

​

var x = window.matchMedia("(max-width: 700px)")

myFunction(x) // 执行时判断界面

x.addListener(myFunction) // 添加监听