谷歌浏览器开发者工具系列31:媒体查询状态变化的事件

前言

通过以下的代码,你可以监听媒体查询的变化:

window.matchMedia('(max-height: 150px)').addListener(console.log)

回调事件中会包含一个原始的媒体查询字符串,其中包含一个名为matches的属性,该属性指定了媒体查询是否适用于当前的界面状况。
javascript media query listener - 谷歌浏览器开发者工具系列31:媒体查询状态变化的事件

应用场景

假设界面上正在执行一个js动画,这个动画是基于DPR(device pixel ratio)的,如果这时候用户把浏览器拖到第二个屏幕上(这个屏幕的分辨率区别于当前屏幕的),这时候你就可以监听对应的变化,从而做出正确的动画调整行为。

发表回复 0