Responsive Javascript 是什么?

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 翻译: 伯乐在线 - 蔡蔡

时间: 2017-06-05

Responsive Javascript 是什么?的相关文章

MZhong&amp;#39;s Resume

MATTHEW.ZHONG Male,27 Age Front-End Developer [email protected] OBJECTIVE My objective is to build SaaS App(also Single Page App) by using advanced technologies like HTML5/CSS3/NODE/MVVM.etc SKILL Semantic HTML/XML/Emmet(zen-coding)/Markd

深入理解JavaScript编程中的同步与异步机制

  这篇文章主要介绍了深入理解JavaScript编程中的同步与异步机制,不仅仅是AJAX已经深入到了各个角落,Node.js的火爆也让JS的异步编程格外引人注目,需要的朋友可以参考下 JavaScript的优势之一是其如何处理异步代码.异步代码会被放入一个事件队列,等到所有其他代码执行后才进行,而不会阻塞线程.然而,对于初学者来说,书写异步代码可能会比较困难.而在这篇文章里,我将会消除你可能会有的任何困惑. 理解异步代码 JavaScript最基础的异步函数是setTimeout和setInt

Javascript开发包汇总

javascript Javascript开发包汇总 Permalink Javascript libraries roundup   Prototype Prototype is a JavaScript framework that aims to ease development of dynamic web applications. Homepage: http://prototype.conio.net Documentation:http://blogs.ebusiness-app

Build a basic responsive site with CSS

原文:http://www.creativebloq.com/responsive-web-design/build-basic-responsive-site-css-1132756 Responsive design is much misunderstood. Jason Michael lays to rest some myths, and then walks us through building a simple responsive website. Knowledge nee

CSS、JavaScript开发者必备的10款最佳工具

原文http://www.csdn.net/article/2013-05-16/2815315-css-and-javascript-tools 摘要:可以说CSS.JavaScript是网站设计的黄金搭档,本文收集了10款超好用的工具,来帮助你设计出更佳的网站,并且还可以提高你的工作效率. 亲们,想通过使用最新的工具来提升你的网站档次吗?本文搜集了10款好用的工具以帮助你提升网站性能. Topcoat Topcoat是一个简洁干净的CSS类库,其专门用于表单元素,如按钮.复选框.滑块等.只需

Ace - Responsive Admin Template

Ace简介: Ace 是一个轻量.功能丰富.HTML5.响应式.支持手机及平板电脑上浏览的管理后台模板,基于CSS框架Bootstrap制作,Bootstrap版本更新至 3.0,Ace – Responsive Admin Template当前最新版!     Live preview  Purchase now » Ace (v1.2) is a lightweight, feature-rich and easy to use admin template based on Bootstr

超全超实用的Javascript类库和jQuery插件大全之二:文字处理,表格和列表处理,实用的javascript开发工具

日期:2012-10-15  来源:GBin1.com 如果你需要解决一些开发中遇到的技术问题的话,很可能会找到一些相关的javascript类库或者是jQuery插件来实现.这样实用的类库或者jQuery插件往往是你应该时常收集并且保存的,特别是如果你不希望自己去处理不同浏览器的兼容性问题的话,使用现成的javascript类库或者是jQuery插件往往能够帮助你提高开发效率. 使用javascript类库可能并不一定是最好的选择,很多情况1下可能你会发现类库加载并不正确,或者有性能上的问题,

超全超实用的Javascript类库和jQuery插件大全之一:Web印刷排版

日期:2012-10-9  来源:GBin1.com 如果你需要解决一些开发中遇到的技术问题的话,很可能会找到一些相关的javascript类库或者是jQuery插件来实现.这样实用的类库或者jQuery插件往往是你应该时常收集并且保存的,特别是如果你不希望自己去处理不同浏览器的兼容性问题的话,使用现成的javascript类库或者是jQuery插件往往能够帮助你提高开发效率. 使用javascript类库可能并不一定是最好的选择,很多情况1下可能你会发现类库加载并不正确,或者有性能上的问题,例

超全超实用的Javascript类库和jQuery插件大全之一:图片,地图和图形

日期:2012-10-10  来源:GBin1.com 如果你需要解决一些开发中遇到的技术问题的话,很可能会找到一些相关的javascript类库或者是jQuery插件来实现.这样实用的类库或者jQuery插件往往是你应该时常收集并且保存的,特别是如果你不希望自己去处理不同浏览器的兼容性问题的话,使用现成的javascript类库或者是jQuery插件往往能够帮助你提高开发效率. 使用javascript类库可能并不一定是最好的选择,很多情况1下可能你会发现类库加载并不正确,或者有性能上的问题,