安云网 - AnYun.ORG | 专注于网络信息收集、网络数据分享、网络安全研究、网络各种猎奇八卦。
当前位置: 安云网 > 技术关注 > 编程茶楼 > 脚本语言 > Responsive Javascript 是什么?

Responsive Javascript 是什么?

时间:2015-02-18来源: 作者:点击:
Responsive Javascript 是什么?

  Responsive Javascript 是什么? //内容来自AnYun.ORG

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

  什么是浏览器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');
        }
}); 
//内容来自AnYun.ORG

  方法如下:

//内容来自AnYun.ORG

  • 用window.matchMedia方法准备一个MediaQueryList
  • 为MatchQueryList添加监听器
  • 监听器触发的时候检查match状态

  浏览器支持 //本文来自安云网

Responsive Javascript 是什么? //本文来自安云网

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

//内容来自AnYun.ORG

  window.onresize //内容来自AnYun.ORG

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

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

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

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

//内容来自AnYun.ORG

  方法如下:

//本文来自安云网

  • 为window.onresize添加事件
  • 用条件语句来检测当前浏览器宽度
  • 替换默认的resize行为

  浏览器支持 //内容来自AnYun.ORG

Responsive Javascript 是什么? //本文来自安云网

  有现成的库吗? //内容来自安云网

  SimpleStateManager //本文来自安云网

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

  主要功能

//内容来自AnYun.ORG

  • 调用浏览器的resize事件
  • 使用SSM调试板来调试站点状态
  • 你可以随心随遇的测试
  • 插件扩展

  方法如下:

//内容来自AnYun.ORG

  • 准备一个响应onEnter的状态
  • 用onLeave清空状态
  • 为每一个状态定义onResize事件(可选)

  示例站点: //内容来自AnYun.ORG

  • Accordion
  • Equal Columns

  浏览器支持 //本文来自安云网

Responsive Javascript 是什么?

//本文来自安云网

  enquire.js

//本文来自安云网

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

//本文来自安云网

  主要功能: //本文来自安云网

  • 调用matchMedia API
  • 管理 registering和unregistering

  示例站点: //内容来自AnYun.ORG

  • Accordion
  • Equal Columns

  浏览器支持

//内容来自安云网

Responsive Javascript 是什么? //本文来自安云网

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

//本文来自安云网

  yepnope.js //内容来自安云网

  yepnope.js是一个根据条件异步资源加载器。他可以根据用户需要加载特定脚本 //内容来自安云网

  调用示例: //内容来自安云网

yepnope({
  test : Modernizr.geolocation,
  yep  : 'normal.js',
  nope : ['polyfill.js', 'wrapper.js']
}); //内容来自安云网 

  浏览器支持

//本文来自安云网

Responsive Javascript 是什么?

//本文来自安云网

  Modernizr

//内容来自安云网

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

//内容来自AnYun.ORG

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

  调用示例:

//本文来自安云网

//Returns true or false
Modernizr.mq('only all and (max-width: 767px)'); //内容来自AnYun.ORG 

  浏览器支持 //内容来自AnYun.ORG

Responsive Javascript 是什么? //内容来自安云网

  原文链接: Responsive Javascript   作者:@蔡volvo蔡

//本文来自安云网

QQ群: WEB开发者官方总群(196171896) 验证消息:Admin10000
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
验证码: 点击我更换图片
相关内容
推荐内容