国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Responsive Javascript 是什么？

missonce / 2567人閱讀

摘要：是什么簡單來說就是可以根據瀏覽器的狀態做出響應。響應包括對視窗大小的反應，根據你設備是否支持觸摸事件或地理定位功能來決定是否顯示特定內容，不一而足。我們可以使用來檢測特定的媒體并為之添加一個事件監聽器來監聽或事件。

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
轉載自：伯樂在線 - 蔡蔡
編輯：Segmentfault

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78013.html

相關文章

  • 響應式導航如何實現 - W3Schools視頻05

    摘要：系列全部視頻響應式網頁布局響應式網頁布局響應式網頁布局幻燈片如何實現響應式導航如何實現 響應式導航即是讓導航變成響應式。常見的做法是在小屏幕時不將全部導航項目列出，而是顯示一個導航圖標，點擊該圖標時才會顯示出完整導航。今天我們就來按照W3Schools的方法完成一個響應式導航。 W3Schools 響應式導航教學 響應式導航例子 視頻連結 B站 YouTube 響應式導航（Re...

    stefanieliang 評論0 收藏0

  • 響應式導航如何實現 - W3Schools視頻05

    摘要：系列全部視頻響應式網頁布局響應式網頁布局響應式網頁布局幻燈片如何實現響應式導航如何實現 響應式導航即是讓導航變成響應式。常見的做法是在小屏幕時不將全部導航項目列出，而是顯示一個導航圖標，點擊該圖標時才會顯示出完整導航。今天我們就來按照W3Schools的方法完成一個響應式導航。 W3Schools 響應式導航教學 響應式導航例子 視頻連結 B站 YouTube 響應式導航（Re...

    Ryan_Li 評論0 收藏0

  • 響應式導航如何實現 - W3Schools視頻05

    摘要：系列全部視頻響應式網頁布局響應式網頁布局響應式網頁布局幻燈片如何實現響應式導航如何實現 響應式導航即是讓導航變成響應式。常見的做法是在小屏幕時不將全部導航項目列出，而是顯示一個導航圖標，點擊該圖標時才會顯示出完整導航。今天我們就來按照W3Schools的方法完成一個響應式導航。 W3Schools 響應式導航教學 響應式導航例子 視頻連結 B站 YouTube 響應式導航（Re...

    stackvoid 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<