使用Javascript来实现响应式布局

来源:http://www.4008831535.com 作者:手机购彩appweb前端 人气:134 发布时间:2020-04-18
摘要:谈到响应式布局,先前也说过很多了,总体归纳成一句话:通过Media媒体查询特性,在不同尺寸的屏幕上展示不同的CSS样式,真正做到了“一次编写,各屏使用”。目前这种方法只支持

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

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

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

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

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

onresize

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

varresizeMethod=function(){

if(document.body.clientWidth<768){

console.log;

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

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

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

matchMedia

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

varmq=window.matchMedia("");

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

★ media — 该属性返回你在设置的媒体查询语句,比如上面的mq.media会返回””

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

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

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

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

varmq=window.matchMedia("");

mq.addListener;

WidthChange;

functionWidthChange{

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

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

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

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

总结

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

本文由手机购彩软件发布于手机购彩appweb前端,转载请注明出处:使用Javascript来实现响应式布局

关键词:

上一篇:比较有创意

下一篇:没有了

频道精选

最火资讯