资讯专栏INFORMATION COLUMN

Responsive Javascript 是什么?

missonce / 2539人阅读

摘要:是什么简单来说就是可以根据浏览器的状态做出响应。响应包括对视窗大小的反应,根据你设备是否支持触摸事件或地理定位功能来决定是否显示特定内容,不一而足。我们可以使用来检测特定的媒体并为之添加一个事件监听器来监听或事件。

Responsive Javascript 是什么?

简单来说就是可以根据浏览器的状态做出响应。响应包括对视窗大小的反应,根据你设备是否支持触摸事件或地理定位功能来决定是否显示特定内容,不一而足。

什么是浏览器APIs

浏览器提供了两个关键的APIs来让我们可以添加Responsive Javascript到站点,那就是 ‘window.matchMedia’ 和’window.onresize’。

window.matchMedia

我们可以使用window.matchMedia API 来检测特定的媒体并为之添加一个事件监听器来监听matched或unmatched事件。这样做的好处就是可以在我们的javascript中复用媒体检测代码,缺点是我们只能检测有限的那些我们想检测的媒体。

//Prepare a MediaQueryList
var mql = window.matchMedia("(max-width:768px)");

//Add a listener to the MediaQueryList
mql.addListener(function(e){
        if(e.matches){
                console.log("enter mobile");
        }
});
方法如下:

用window.matchMedia方法准备一个MediaQueryList

为MatchQueryList添加监听器

监听器触发的时候检查match状态

浏览器支持

polyfill 提供了兼容古老浏览器的方法

window.onresize

当用户改变浏览器视窗大小的时候会触发这个方法。我们就是靠这个方法来提供不同的响应javascript。

这个window.onresize方法由来已久,大家以前肯定也用过,然而Responsive Javascript就是使用这个简单方法来处理不同的浏览器状态。

var resizeMethod = function(){
    if (document.body.clientWidth < 768) {
        console.log("mobile");
    }
};

//Attach event for resizing
window.addEventListener("resize", resizeMethod, true);

方法如下:

为window.onresize添加事件

用条件语句来检测当前浏览器宽度

替换默认的resize行为

浏览器支持

有现成的库吗?

SimpleStateManager


SimpleStateManager是一个状态响应管理器,他可以根据你的站点的不同状态响应出不同的Javascript,允许你根据需求定义任意多的站点状态,并且你可以为每一个站点状态建立独立的Enter,Leave,Resize事件

主要功能

调用浏览器的resize事件

使用SSM调试板来调试站点状态

你可以随心随遇的测试

插件扩展

方法如下:

准备一个响应onEnter的状态

用onLeave清空状态

为每一个状态定义onResize事件(可选)

示例站点:

Accordion

Equal Columns

浏览器支持

enquire.js


enquire.js库旨在根据CSS media queries响应不同的Javascript。他根据你写的CSS中media queries来决定Javascript什么时候可用,什么时候禁用

主要功能:

调用matchMedia API

管理 registering和unregistering

示例站点:

Accordion

Equal Columns

浏览器支持

polyfill提供了兼容古老浏览器的方法

yepnope.js


yepnope.js是一个根据条件异步资源加载器。他可以根据用户需要加载特定脚本

调用示例:

yepnope({
  test : Modernizr.geolocation,
  yep  : "normal.js",
  nope : ["polyfill.js", "wrapper.js"]
});

浏览器支持

Modernizr


Modernizr主要是检测用户浏览器中的HTML5和CSS3功能

鲜为人知的功能就是他可以使用Modernizr.mq(str)来检测媒体

调用示例:

//Returns true or false
Modernizr.mq("only all and (max-width: 767px)");

浏览器支持

原文:Responsive Javascript
转载自:伯乐在线 - 蔡蔡
编辑:Segmentfault

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/78013.html

相关文章

  • 响应式导航如何实现 - W3Schools视频05

    摘要:系列全部视频响应式网页布局响应式网页布局响应式网页布局幻灯片如何实现响应式导航如何实现 响应式导航即是让导航变成响应式。常见的做法是在小屏幕时不将全部导航项目列出,而是显示一个导航图标,点击该图标时才会显示出完整导航。今天我们就来按照W3Schools的方法完成一个响应式导航。 W3Schools 响应式导航教学 响应式导航例子 视频连结 B站 YouTube 响应式导航(Re...

    stefanieliang 评论0 收藏0
  • 响应式导航如何实现 - W3Schools视频05

    摘要:系列全部视频响应式网页布局响应式网页布局响应式网页布局幻灯片如何实现响应式导航如何实现 响应式导航即是让导航变成响应式。常见的做法是在小屏幕时不将全部导航项目列出,而是显示一个导航图标,点击该图标时才会显示出完整导航。今天我们就来按照W3Schools的方法完成一个响应式导航。 W3Schools 响应式导航教学 响应式导航例子 视频连结 B站 YouTube 响应式导航(Re...

    Ryan_Li 评论0 收藏0
  • 响应式导航如何实现 - W3Schools视频05

    摘要:系列全部视频响应式网页布局响应式网页布局响应式网页布局幻灯片如何实现响应式导航如何实现 响应式导航即是让导航变成响应式。常见的做法是在小屏幕时不将全部导航项目列出,而是显示一个导航图标,点击该图标时才会显示出完整导航。今天我们就来按照W3Schools的方法完成一个响应式导航。 W3Schools 响应式导航教学 响应式导航例子 视频连结 B站 YouTube 响应式导航(Re...

    stackvoid 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<