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. iOS- 如何使用Alcatraz来高效的管理Xcode-Plugin(Xcode插件)

    1.前言 相信各位iOS攻城师用的Xocde的快捷插件也不少,今天向大家分享一款能高效快捷的管理Xcode-Plugin的软件<Alcatraz>,自己亲自体验后,爱不释手.   (这里用 ...

  2. .NET项目中常用的32个正则表达式总结

    最近没事总结了下最近所用到的正则表达式,下面32个是经常用到的,总结下来与大家分享. . "^-?[1-9]\\d*$",//整数 . "^[1-9]\\d*$" ...

  3. HDU 1231 最大子序列

    http://acm.hdu.edu.cn/showproblem.php?pid=1231 Problem Description 给定K个整数的序列{ N1, N2, ..., NK },其任意连 ...

  4. Rotate Array II

    Rotate an array of n elements to the right by k steps. For example, with n = 7 and k = 3, the array  ...

  5. Centos7 pip 安装MySQLdb(mysql-python)出错

    租了个阿里云的Centos7的ECS,需要使用pip安装MySQLdb模块.也就是mysql-python模块. 但是遇到问题 Collecting mysql-python Downloading ...

  6. Java并发编程实战2-线程安全

    1. 定义 一个类是线程安全的,是指在被多个线程访问时,类可以持续进行正确的行为. 2. WHY 我们想要的是线程安全的程序,为什么在线程安全的开始讲线程安全的类呢? 编写线程安全的代码,本质上就是管 ...

  7. tensorflow环境下安装scikit-learn

    1. scikit-learn所依赖的环境: python(>=2.6 or >=3.3) numpy(>=1.6.1) scipy(>=0.9) 可用conda list 查 ...

  8. Qt——结合qt和python

    经常使用qt的童鞋一定有过这样的经历:百度或Google某个关于Qt的问题的时候,发现有的解答不是用的C++,而是包含很多py.__init__.self之类的词. 如果学过python,你会发现,这 ...

  9. VRRP主备备份配置示例—实现网关冗余备份

    本示例的基本拓扑结构如图所示. HostA通过Switch 双线连接到RouterA 和RouterB .用户希望实现:正常情况下, 主机以RouterA 为默认网关接入Intemet; 而当Rout ...

  10. bzoj1027【JSOI2007】合金

    题目描述 某公司加工一种由铁.铝.锡组成的合金.他们的工作很简单.首先进口一些铁铝锡合金原材料,不同种类的原材料中铁铝锡的比重不同.然后,将每种原材料取出一定量,经过融解.混合,得到新的合金.新的合金 ...