Responsive Javascript 是什么?

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

  什么是浏览器APIs

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

  window.matchMedia

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

1
2
3
4
5
6
7
8
9
//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就是使用这个简单方法来处理不同的浏览器状态。

1
2
3
4
5
6
7
8
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是一个根据条件异步资源加载器。他可以根据用户需要加载特定脚本

  调用示例:

1
2
3
4
5
yepnope({
  test : Modernizr.geolocation,
  yep  : 'normal.js',
  nope : ['polyfill.js', 'wrapper.js']
});

  浏览器支持

  Modernizr

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

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

  调用示例:

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

  浏览器支持

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

你知道吗?什么是 Responsive JavaScript ?的更多相关文章

  1. MZhong's Resume

    MATTHEW.ZHONG Male,27 Age Front-End Developer matthew.zhong@morningstar.com OBJECTIVE My objective i ...

  2. 如何提高scroll事件的性能

    1. chrome devtool 是诊断页面滚动性能的有效工具 2. 提升滚动时性能,就是要达到fps高且稳. 3. 具体可以从以下方面着手 使用web worker分离无页面渲染无关的逻辑计算 触 ...

  3. [欣赏代码片段] (JavaScript) Responsive jQuery

    jQuery(document).ready(function($) { /* getting viewport width*/ var responsive_viewport = $(window) ...

  4. JavaScript资源大全中文版(Awesome最新版)

    Awesome系列的JavaScript资源整理.awesome-javascript是sorrycc发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架.运行器.QA.MVC框架和库.模 ...

  5. 15 Best Responsive HTML5 Frameworks 2014

    Best HTML5 frameworks are most popular because with the use of these frameworks you can create websi ...

  6. Fixed Responsive Nav – 响应式的单页网站导航插件

    Fixed Responsive Nav 是一个响应式的,固定的,触摸友好的单页网站导航插件,响应式导航,流畅的动画滚动.该项目采用渐进增强构建,支持工作在 IE6 及以上版本的浏览器. 你可以给导航 ...

  7. Ace - Responsive Admin Template

    Ace简介: Ace 是一个轻量.功能丰富.HTML5.响应式.支持手机及平板电脑上浏览的管理后台模板,基于CSS框架Bootstrap制作,Bootstrap版本更新至 3.0,Ace – Resp ...

  8. 使用 Responsive Elements 快速构建响应式网站

    Responsive Elements 可以使任何元素来适应和应对他们所占据的区域.这是一个轻量的 JavaScript 库,你可以轻松嵌入到你的项目.元素会更具自己的宽度,自动响应和适应空间的增加或 ...

  9. [转]响应式表格jQuery插件 – Responsive tables

    本文转自:http://www.shejidaren.com/responsive-tables-for-bootstrap-3.html 这个Responsive tables jQuery插件依赖 ...

随机推荐

  1. C语言中Union类型的使用方法

    转自:http://blog.csdn.net/feimor/article/details/6858103 使用C语言时,常常使用struct,对于union类型却几乎没有用过,只知道它是联合类型, ...

  2. Maven解读:强大的依赖体系

    Github地址:https://github.com/zwjlpeng/Maven_Detail Maven最大的好处就是能够很方便的管理项目对第三方Jar包的依赖,只需在Pom文件中添加几行配置文 ...

  3. 转 JS模块化简单实现

    git示例地址:https://github.com/wufenfen/requireJS-Demo.git

  4. 使用GatewayWorker 开发个即时聊天demo

    前言: 上手册以示尊重:https://www.kancloud.cn/walkor/gateway-worker/326138: https://www.cnblogs.com/fuqiang88/ ...

  5. Tween.js 动画效果

    一.apply,和call的用法. 先来一个与本次博文无关的东西,就是apply和call的用法.其实apply和call的用法都一样,只是他们的传参不一样.apply是数组,而call是单独的传,类 ...

  6. ACM数论之旅14---抽屉原理,鸽巢原理,球盒原理(叫法不一又有什么关系呢╮(╯▽╰)╭)

    这章没有什么算法可言,单纯的你懂了原理后会不会运用(反正我基本没怎么用过 ̄ 3 ̄) 有366人,那么至少有两人同一天出生(好孩子就不要在意闰年啦( ̄▽ ̄")) 有13人,那么至少有两人同一月 ...

  7. css中定位功能的特性

    它有四大特性,页面找不到盒子的情况 1.z-index值表示谁压着谁,数值大的压盖数值小的 2.只有定位了的元素,才有z-index.也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-inde ...

  8. [BinaryTree] AVL树、红黑树、B/B+树和Trie树的比较

    转自:AVL树.红黑树.B/B+树和Trie树的比较 AVL树 最早的平衡二叉树之一.AVL是一种高度平衡的二叉树,所以通常的结果是,维护这种高度平衡所付出的代价比从中获得的效率收益还大,故而实际的应 ...

  9. 理解 Delphi 的类(十一) - 深入类中的方法[8] - 抽象方法与抽象类

    //抽象方法类似与接口; 在没有接口的年代 Delphi 是用抽象方法来模拟接口的; 我想它最终会被接口替代. {下面就定义了两个抽象方法} TMyClass = class(TObject)   p ...

  10. mybatis映射文件的使用(一),工程目录结构、源代码和数据库

    代码开发环境 开发工具为IDEA 工程构建方式为maven 数据库为mysql 5.7.20 mybatis版本为 3.1.1 mysql-connect-java jar包版本为 5.1.34 数据 ...