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

当 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博客 ” ，链接：http://blog.itpub.net/69933200/viewspace-2653400/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/69933200/viewspace-2653400/