資訊專欄INFORMATION COLUMN
摘要：是什么簡單來說就是可以根據(jù)瀏覽器的狀態(tài)做出響應(yīng)。響應(yīng)包括對視窗大小的反應(yīng)，根據(jù)你設(shè)備是否支持觸摸事件或地理定位功能來決定是否顯示特定內(nèi)容，不一而足。我們可以使用來檢測特定的媒體并為之添加一個(gè)事件監(jiān)聽器來監(jiān)聽或事件。
Responsive Javascript 是什么？
簡單來說就是可以根據(jù)瀏覽器的狀態(tài)做出響應(yīng)。響應(yīng)包括對視窗大小的反應(yīng)，根據(jù)你設(shè)備是否支持觸摸事件或地理定位功能來決定是否顯示特定內(nèi)容，不一而足。
什么是瀏覽器APIs瀏覽器提供了兩個(gè)關(guān)鍵的APIs來讓我們可以添加Responsive Javascript到站點(diǎn)，那就是 ‘window.matchMedia’ 和’window.onresize’。
window.matchMedia我們可以使用window.matchMedia API 來檢測特定的媒體并為之添加一個(gè)事件監(jiān)聽器來監(jiān)聽matched或unmatched事件。這樣做的好處就是可以在我們的javascript中復(fù)用媒體檢測代碼，缺點(diǎn)是我們只能檢測有限的那些我們想檢測的媒體。
//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方法準(zhǔn)備一個(gè)MediaQueryList
為MatchQueryList添加監(jiān)聽器
監(jiān)聽器觸發(fā)的時(shí)候檢查match狀態(tài)
瀏覽器支持
polyfill 提供了兼容古老瀏覽器的方法
window.onresize當(dāng)用戶改變?yōu)g覽器視窗大小的時(shí)候會觸發(fā)這個(gè)方法。我們就是靠這個(gè)方法來提供不同的響應(yīng)javascript。
這個(gè)window.onresize方法由來已久，大家以前肯定也用過，然而Responsive Javascript就是使用這個(gè)簡單方法來處理不同的瀏覽器狀態(tài)。
var resizeMethod = function(){
if (document.body.clientWidth < 768) {
console.log("mobile");
}
};
//Attach event for resizing
window.addEventListener("resize", resizeMethod, true);
方法如下：
為window.onresize添加事件
用條件語句來檢測當(dāng)前瀏覽器寬度
替換默認(rèn)的resize行為
有現(xiàn)成的庫嗎？
SimpleStateManager
SimpleStateManager是一個(gè)狀態(tài)響應(yīng)管理器，他可以根據(jù)你的站點(diǎn)的不同狀態(tài)響應(yīng)出不同的Javascript，允許你根據(jù)需求定義任意多的站點(diǎn)狀態(tài)，并且你可以為每一個(gè)站點(diǎn)狀態(tài)建立獨(dú)立的Enter,Leave,Resize事件
調(diào)用瀏覽器的resize事件
使用SSM調(diào)試板來調(diào)試站點(diǎn)狀態(tài)
你可以隨心隨遇的測試
插件擴(kuò)展
準(zhǔn)備一個(gè)響應(yīng)onEnter的狀態(tài)
用onLeave清空狀態(tài)
為每一個(gè)狀態(tài)定義onResize事件(可選)
Accordion
Equal Columns
enquire.js庫旨在根據(jù)CSS media queries響應(yīng)不同的Javascript。他根據(jù)你寫的CSS中media queries來決定Javascript什么時(shí)候可用，什么時(shí)候禁用
調(diào)用matchMedia API
管理 registering和unregistering
Accordion
Equal Columns
polyfill提供了兼容古老瀏覽器的方法
yepnope.js
yepnope.js是一個(gè)根據(jù)條件異步資源加載器。他可以根據(jù)用戶需要加載特定腳本
調(diào)用示例：
yepnope({
test : Modernizr.geolocation,
yep : "normal.js",
nope : ["polyfill.js", "wrapper.js"]
});
瀏覽器支持
Modernizr
Modernizr主要是檢測用戶瀏覽器中的HTML5和CSS3功能
鮮為人知的功能就是他可以使用Modernizr.mq(str)來檢測媒體
調(diào)用示例：
//Returns true or false
Modernizr.mq("only all and (max-width: 767px)");
瀏覽器支持
原文：Responsive Javascript
轉(zhuǎn)載自：伯樂在線 - 蔡蔡
編輯：Segmentfault
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78013.html
摘要：系列全部視頻響應(yīng)式網(wǎng)頁布局響應(yīng)式網(wǎng)頁布局響應(yīng)式網(wǎng)頁布局幻燈片如何實(shí)現(xiàn)響應(yīng)式導(dǎo)航如何實(shí)現(xiàn) 響應(yīng)式導(dǎo)航即是讓導(dǎo)航變成響應(yīng)式。常見的做法是在小屏幕時(shí)不將全部導(dǎo)航項(xiàng)目列出，而是顯示一個(gè)導(dǎo)航圖標(biāo)，點(diǎn)擊該圖標(biāo)時(shí)才會顯示出完整導(dǎo)航。今天我們就來按照W3Schools的方法完成一個(gè)響應(yīng)式導(dǎo)航。 W3Schools 響應(yīng)式導(dǎo)航教學(xué) 響應(yīng)式導(dǎo)航例子 視頻連結(jié) B站 YouTube 響應(yīng)式導(dǎo)航（Re...
摘要：系列全部視頻響應(yīng)式網(wǎng)頁布局響應(yīng)式網(wǎng)頁布局響應(yīng)式網(wǎng)頁布局幻燈片如何實(shí)現(xiàn)響應(yīng)式導(dǎo)航如何實(shí)現(xiàn) 響應(yīng)式導(dǎo)航即是讓導(dǎo)航變成響應(yīng)式。常見的做法是在小屏幕時(shí)不將全部導(dǎo)航項(xiàng)目列出，而是顯示一個(gè)導(dǎo)航圖標(biāo)，點(diǎn)擊該圖標(biāo)時(shí)才會顯示出完整導(dǎo)航。今天我們就來按照W3Schools的方法完成一個(gè)響應(yīng)式導(dǎo)航。 W3Schools 響應(yīng)式導(dǎo)航教學(xué) 響應(yīng)式導(dǎo)航例子 視頻連結(jié) B站 YouTube 響應(yīng)式導(dǎo)航（Re...
摘要：系列全部視頻響應(yīng)式網(wǎng)頁布局響應(yīng)式網(wǎng)頁布局響應(yīng)式網(wǎng)頁布局幻燈片如何實(shí)現(xiàn)響應(yīng)式導(dǎo)航如何實(shí)現(xiàn) 響應(yīng)式導(dǎo)航即是讓導(dǎo)航變成響應(yīng)式。常見的做法是在小屏幕時(shí)不將全部導(dǎo)航項(xiàng)目列出，而是顯示一個(gè)導(dǎo)航圖標(biāo)，點(diǎn)擊該圖標(biāo)時(shí)才會顯示出完整導(dǎo)航。今天我們就來按照W3Schools的方法完成一個(gè)響應(yīng)式導(dǎo)航。 W3Schools 響應(yīng)式導(dǎo)航教學(xué) 響應(yīng)式導(dǎo)航例子 視頻連結(jié) B站 YouTube 響應(yīng)式導(dǎo)航（Re...
閱讀 3691·2021-09-22 15:28
閱讀 1305·2021-09-03 10:35
閱讀 888·2021-09-02 15:21
閱讀 3491·2019-08-30 15:53
閱讀 3504·2019-08-29 17:25
閱讀 580·2019-08-29 13:22
閱讀 1567·2019-08-28 18:15
閱讀 2298·2019-08-26 13:57
