×

WEB响应式布局中的Javascript

作者:Web前端之家2014.07.14来源:Web前端之家浏览:13302评论:0
微信公众号

微信公众号

1344247638_-1719592020_20984_imageAddr.jpg

谈到响应式布局,先前也说过很多了,总体归纳成一句话:通过Media媒体查询特性,在不同尺寸的屏幕上展示不同的CSS样式,真正做到了“一次编写,各屏使用”。目前这种方法只支持在高富帅浏览器上。但是对于IE6-8我们还是要处理的。我目前处理低端浏览器的方法主要是通过判断针对IE6/7/8新增一个专属样式,然后在CSS样式中设置其最小宽度(min-width:1000px),如果在浏览器尺寸小于1000px的时候,底部就会出现滚动条。具体代码如下:

  1. <!--[if lt IE 7]> <body id="ie-dh-con"> <![endif]-->   

  2. <!--[if IE 7]>    <body id="ie-dh-con"> <![endif]-->   

  3. <!--[if IE 8]>    <body id="ie-dh-con"> <![endif]-->   

  4. <!--[if gt IE 8]><!-->   

  5. <body>   

  6. <!--<![endif]-->  

在介绍新方法之前,我们可以先回顾一下先前发表过的相关响应式的知识:

蓦然回首,PC网站移动化已经不再是梦
Media Query实现响应式布局的判断汇总
如何实现网页中字体响应式
【实战】用Media Query实现响应式Web布局
【精品】推荐15款响应式Web设计工具
蓦然回首,PC网站移动化已经不再是梦

其实上面的方法是最简单的处理方法了,今天主要是想说下另外一种方法:使用Javascript来实现响应式布局。其原理是:针对浏览器状态做出不同反应的JavaScript代码。

先前在百度博客上看过方法,我自己也总结了下,主要分为两种方法:

onresize

Onresize其实就是一个浏览器事件啊,在IE中也是可以使用的,我们来看下面的代码:

  1. var resizeMethod = function(){   

  2.     if (document.body.clientWidth &lt; 768) {   

  3.         console.log('mobile');   

  4.     }   

  5. };   

  6.   

  7. //绑定事件处理函数到resize事件   

  8. window.addEventListener("resize", resizeMethod, true);      

我们只需要为全局对象window绑定一个resize事件,然后在事件处理函数中对浏览器当前的状态作出判断,然后运行相应的JavaScript代码即可。

matchMedia

window.matchMedia允许我们使用CSS3中媒体查询状态在JavaScript进行状态响应,应用起来也很简单。看如下代码:

  1. var mq = window.matchMedia("(min-width: 500px)");   

此时,window.matchMedia返回了一个实例mq,它包含一些属性和方法,其中我们会用到的是以下三个:

★ media — 该属性返回你在设置的媒体查询语句,比如上面的mq.media会返回”(min-width: 500px)”

★ matches — 该属性返回目前对于查询状态的匹配情况,如果匹配了查询状态,返回true,反之返回false,我们一般这样使用:

  1. if(mq.matches){   

  2.     //此时window的宽度大于500px   

  3. }else{   

  4.     //此时window的宽度小于500px   

  5. }    

★ addListener — 我们可以运用该方法监听变化,一旦变化满足查询条件,就做出相应反应。我们来看下面的代码:

  1. if(window.matchMedia){   

  2.     var mq = window.matchMedia("(min-width: 500px)");      

  3.     mq.addListener(WidthChange);      

  4.     WidthChange(mq);    

  5. }      

  6.   

  7. function WidthChange(mq){   

  8.             if(mq.matches){   

  9.   

  10.             //此时window的宽度大于500px   

  11.   

  12.         }else{   

  13.   

  14.             //此时window的宽度小于500px   

  15.   

  16.         }     

  17. }  

代码非常简单明确,但是需要注意的一点是你必须在addListener之后马上运行事件处理函数WidthChange,这能确保你的代码将会在页面载入载入中或者载入前完成初始化。如果没有这行代码,如果用户不去手动改变浏览器的尺寸,即使满足了查询条件,WidthChange函数也不会自行调用。

目前,现代浏览器都支持matchMedia方法,如果你需要在旧版本的浏览器中使用matchMedia,有心的程序员已经编写出了相应的替代的代码库。

总结

两种方法都可以使用,个人比较偏向于第二种吧,简单方便。其实响应式JavaScript的库非常多,现在比较流行的几个分别是:SimpleStateManager、enquire.js、yepnope.js以及大名鼎鼎的Modernizr。它们在原生的matchMedia方法的基础上,添加了许多非常实用的功能,为我们编写响应式JavaScript代码提供了不少帮助。

您的支持是我们创作的动力!
温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/Javascript-media.html

网友评论文明上网理性发言已有0人参与

发表评论:

最新留言

  • 访客

    sddddddddddddddVS的vVSVS但是v方法v方法v发v方法v发v发v方不方便德文法文...

  • 没人发言

    鸡肋的功能...

  • 23b

    这个你应该加群找群主才对吧...

  • 访客

    大佬,能提供能一下提取图片中的文字工具的源码吗,感谢...

  • qdxx

    SEO原创还可以的,新手学习下。...

  • Web前端之家

    已处理!...

  • 程序员路灯

    贵站友链已添加名称:程序员路灯地址:http://www.eqishare.com...

  • Web前端之家

    可以加群讨论...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2022 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.2