手機網頁, 網頁設計, 網頁資源

《Pure》羽量級自適應網頁版型框架 (RWD Framework)

梅干2014/02/25
梅問題-《Pure》羽量級自適應網頁版型套件
  先前曾分享過由Twitter所研發的Bootstrap,透過這個RWD Framework可快速的打造出自適應的網頁版型,同時內建的特效也相當完整,甚至完全不用寫任何的程式碼,就能快速的打造出自適應的網頁版型,讓網頁可橫跨各種裝置與解析度,接下來要再來分享另一套RWD Framework Pure,這套則大有來頭,是由Yahoo所研發的,由於該套件就如同它的名字,只有單純的CSS的部分,因此Pure不像Bootstrap內建就許多的jq互動特效,所以設計者可任意的載入其它的JavaScirpt框架,由於Pure只有單純的CSS框架,因此檔案相當的小只有4.4KB而已,算是目前RWD Framework最輕巧的,因此若你只要製作自適應的網頁版型時,Yahoo這套Pure框架絕不容錯過喔!

Pure:
套件名稱:Pure
套件官網:http://purecss.io/

進入官網只需複製下方的語法就可使用了,而Pure有個很可愛的地方,就是可依所需載入自已所要的css檔案,以排版來說只載入Grids的話才1KB而已。
梅問題-《Pure》羽量級自適應網頁版型套件
接著將它貼到網頁的header間。
梅問題-《Pure》羽量級自適應網頁版型套件
在開始要使用Pure的版型時,要先了解一下它的網頁版型架構,Pure的版型中,有分基本的5欄與24欄二種(Bootstrap是12欄)。
梅問題-《Pure》羽量級自適應網頁版型套件
在Pure的隱藏模式共只有三種,分別為手機、平板、桌機。
梅問題-《Pure》羽量級自適應網頁版型套件
pure-g-r表示該區塊為自適應區塊,而裡面的子層要用pure-u,前面是要佔用的比例,後面是所有的欄位數,以下圖來說18-24指的就是,共有24欄佔了18欄的區塊,而上下二個div加起來也要與總數相符。
梅問題-《Pure》羽量級自適應網頁版型套件
測試一下在大螢幕時,可同時看到左右二欄,縮小時右側邊欄則會向左堆疊靠齊。
梅問題-《Pure》羽量級自適應網頁版型套件
假設若希望手機瀏覽時,側邊欄可以隱藏起來,只要在class後再加pure-hidden-phone就可以了。
梅問題-《Pure》羽量級自適應網頁版型套件
這時當縮小螢幕時,側邊欄就會自動的隱藏起來了。
梅問題-《Pure》羽量級自適應網頁版型套件
若只是pure-g的話,表示該區塊沒有自適應,而區塊會依照比例同時縮小。
梅問題-《Pure》羽量級自適應網頁版型套件
可看到裡面的三小個區塊不會向左堆疊,而是直接等比的縮小。
梅問題-《Pure》羽量級自適應網頁版型套件
[範例預覽] | [範例下載]
UAG軍規iPhone防摔殼