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

这是完整的JavaScript：

1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" > var leftcolumn = document.getElementById（“leftcolumn”）。getElementsByTagName（“em”）[0]</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" > var rightcolumn = document.getElementById（“rightcolumn”）。getElementsByTagName（“em”）[0]</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" > var maincolumn = document.getElementById（“contentcolumn”）。getElementsByTagName（“em”）[0]</font></font><font></font> <font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" > var mqls = [</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >      window.matchMedia（“（max-width：840px）”），</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >      window.matchMedia（“（最大宽度：600px）”）</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" > ]</font></font><font></font> <font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" > function mediaqueryresponse（mql）{</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >      if （mqls [0] .matches）{ // {max-width：840px}查询匹配</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">          leftcolumn.innerHTML =“180px” //不是多余的</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">          maincolumn.innerHTML =“流体（响应布局触发）”</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >          rightcolumn.innerHTML =“流体（响应布局触发）”</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >      }</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >      if （mqls [1] .matches）{ // {max-width：600px}查询匹配</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">          leftcolumn.innerHTML =“流体（响应布局触发）”</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >      }</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >      if （！mqls [0] .matches &&！mqls [1] .matches）{ //两个查询都不匹配</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">          rightcolumn.innerHTML =“190px”</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >          leftcolumn.innerHTML =“180px”</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >          maincolumn.innerHTML =“固定”</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >      }</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" > }</font></font><font></font> <font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" > for （ var i = 0; i <mqls.length; i ++）{</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >      mediaqueryresponse（mqls [i]） //在运行时显式调用侦听器函数</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">      mqls [i] .addListener（mediaqueryresponse） //附加侦听器函数以侦听状态更改</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> }</font></font>

我们处理函数中的逻辑被设置，因此代码的每个部分彼此不相互排斥 -  (max-width: 600px) 例如， 当查询“  ”匹配 时，“  ”也是如此 (max-width: 840px) ，反之亦然，所以我们不应该使用“  else ”声明跟随每个“  if ”声明以捕捉“对立”条件，这可能是众多之一。 相反，只需逐步执行我们的代码，并在最后测试时，何时两个查询都不匹配，以检测何时布局既不是840px也不是600px宽。

现在，看看这一行：

1	<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >  leftcolumn.innerHTML =“180px” //不是多余的</font></font>

在 if 布局为840px或更低时匹配 的“  ”子句 内部 。 它可能看起来多余 - 毕竟， leftcolumn 当屏幕宽度超过840px时 ，我们已经设置“  ”显示“180px”，所以进入840px，为什么重复相同的动作？ 原因是我们还需要考虑在相反方向发生的事件 - 即从窄屏幕（即：640px或更小）到更宽屏幕（即：840px或更高）。 在640px阶段，“  leftcolumn ”文本被替换为“Fluid（响应布局触发）”。 当用户将浏览器的大小调整回840px或更高时，需要代码撤消在640px阶段完成的操作。

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/69933200/viewspace-2653431/，如需转载，请注明出处，否则将追究法律责任。

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