当 media 用一些正则表达式探测属性时，我们可以均衡这些差异。以下 window.matchMedia() 处理函数根据 window.matchMedia() 我们的 mqls 数组中的哪个查询列表匹配，有选择地执行不同的代码：

var mqls = [// window.matchMedia（）查询列表
	window.matchMedia（“（max-width：860px）”），
	window.matchMedia（“（max-width：600px）”），
	window.matchMedia（“（max-height：500px）”）]function mediaqueryresponse（mql）{
	if（/ \（max-width：\ s * 860px \）/。test（mql.media））{//何时触发“（max-width：860px）”查询
		//做一点事。探测mql.matches以查看是否实际满足查询条件
	}
	else if（/ \（max-width：\ s * 600px \）/。test（mql.media））{//何时触发“（max-width：600px）”查询
		//做一点事。探测mql.matches以查看是否实际满足查询条件
	}
	else if（/ \（max-height：\ s * 500px \）/。test（mql.media））{//何时触发“（max-height：500px）”查询
		//做一点事。探测mql.matches以查看是否实际满足查询条件
	}}

media 首先在处理函数内检查属性，确保只根据触发处理程序的媒体查询执行函数体的特定部分。结果类似于为每个 window.matchMedia() 查询定义单独的函数，具有更易于管理的单个函数。然而，它没有缺点。 CSS媒体查询很多时候会在范围上重叠，因此针对一个查询的代码也会针对另一个查询进行测试。通过基于传入 window.matchMedia() 查询对功能代码进行分段，每个块都成为互斥区域，无法同时将自身应用于其他区域，这取决于您正在使用的媒体查询集。在那种情况下，使用 mql.matches 相反，因为您的主逻辑交换机是更好的路由，即使它意味着相同的代码可能会运行多次。

ITPub博客

使用window.matchMedia（）匹配多个CSS媒体查询（5）

最新文章