ITPub博客

首页 > IT职业 > IT生活 > 使用window.matchMedia()匹配多个CSS媒体查询(7)

使用window.matchMedia()匹配多个CSS媒体查询(7)

原创 IT生活 作者:cenfeng 时间:2019-08-12 17:09:30 0 删除 编辑

这是完整的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/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-06-18

  • 博文量
    119
  • 访问量
    66386