当 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/