这是完整的JavaScript：

<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宽。

现在，看看这一行：

<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博客

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

最新文章