Responsive javascript 是什么?
简单来说就是可以根据浏览器的状态做出响应。响应包括对视窗大小的反应,根据你设备是否支持触摸事件或地理定位功能来决定是否显示特定内容,不一而足。
什么是浏览器APIs
浏览器提供了两个关键的APIs来让我们可以添加Responsive Javascript到站点,那就是 ‘window.matchMedia’ 和’window.onresize’。
window.matchMedia
我们可以使用window.matchMedia API 来检测特定的媒体并为之添加一个事件监听器来监听matched或unmatched事件。这样做的好处就是可以在我们的javascript中复用媒体检测代码,缺点是我们只能检测有限的那些我们想检测的媒体。
//Prepare a MediaQueryListvar mql = window.matchMedia("(max-width:768px)");//Add a listener to the MediaQueryListmql.addListener(function(e){ if(e.matches){ console.log('enter mobile'); }});
方法如下:
浏览器支持
polyfill提供了兼容古老浏览器的方法
window.onresize
当用户改变浏览器视窗大小的时候会触发这个方法。我们就是靠这个方法来提供不同的响应javascript。
这个window.onresize方法由来已久,大家以前肯定也用过,然而Responsive Javascript就是使用这个简单方法来处理不同的浏览器状态。
var resizeMethod = function(){ if (document.body.clientWidth < 768) { console.log('mobile'); }};//Attach event for resizingwindow.addEventListener("resize", resizeMethod, true);
方法如下:
浏览器支持
有现成的库吗?
SimpleStateManager
SimpleStateManager是一个状态响应管理器,他可以根据你的站点的不同状态响应出不同的Javascript,允许你根据需求定义任意多的站点状态,并且你可以为每一个站点状态建立独立的Enter,Leave,Resize事件
主要功能
方法如下:
示例站点:
浏览器支持
enquire.JS
enquire.js库旨在根据CSS media queries响应不同的Javascript。他根据你写的CSS中media queries来决定Javascript什么时候可用,什么时候禁用
主要功能:
示例站点:
浏览器支持
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 falseModernizr.mq('only all and (max-width: 767px)');
浏览器支持
前面我们也提到了让IE系列支持CSS3自适应的js,分别是respond.js和css3-mediaqueries.js,欢迎回归查看。
零七网部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与零七网进行文章共享合作。