在JavaScript中怎样进行媒介查询

介绍

在JavaScript中使用媒介查询主要用到window.matchMedia这个API。

浏览器支持情况:

window.matchMedia

使用方式

// 参数为CSS中的查询字符串
const mq = window.matchMedia('(min-width: 500px)');

if (mq.matches) {
	// 窗口宽度大于等于500px执行
} else {
	// 窗口宽度小于500px执行
}

当然也可以监听媒介的改变:

  if (matchMedia) {
            const mq = matchMedia('(min-width: 500px)');
	    // 这个监听事件只在媒介变化后触发一次
            mq.addListener(widthChange);
	    // 这里手动调用一次,防止由于事件没有触发而导致默认样式没有应用。
            widthChange(mq);
        }

        // media query change
        function widthChange(mq) {
            if (mq.matches) {
                console.log("window width is at least 500px");
            } else {
                console.log('window width is less than 500px');
            }
        }