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

梅問題-《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》羽量級自適應網頁版型套件
[範例預覽] | [範例下載]

相關文章

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

表單按鈕不套用iPhone內建的圓角與漸層樣式效果

表單按鈕不套用iPhone內建的圓角與漸層樣式效果

MakeAppicon 線上立即產生iOS、Android所需的各種圖示大小

MakeAppicon 線上立即產生iOS、Android所需的各種圖示大小

CSS教學-【Responsive 網頁自適版型】Media Screen 一覽表

CSS教學-【Responsive 網頁自適版型】Media Screen 一覽表

手機網頁必知-設定書籤網址建立到手機桌面中的APP圖示

手機網頁必知-設定書籤網址建立到手機桌面中的APP圖示





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 2 梅留言

  • 第2梅
    iamwly 說道:

    梅干您好,最近在自學RWD,找到您這篇參考文章,
    就想試用看看,於是我到它網站去看,
    發現版本已到0.5.0,且您這篇有提到的像是pure-g-r及pure-hidden-phone,
    都從這版本移除了,它似乎是變成設計時要以行動裝置版本的思維下去設計,
    但我有個問題了,如果某個div,我反而是要在螢幕寬大於768px時才出現,
    能這麼做嗎?(可能我理解的還不夠,所以一直試不出來)
    謝謝!

    回應:
    目前已改為pure-u前綴作設定,
    至於顯示的部分,需要自定樣式才可以
  • 第1梅
    李昱陞 說道:

    感謝梅干分享,那兩天的課程真的學到很多自適應網頁的應用、規劃。

    還有另外一個專門為 Compass 設計的 Responsive Grids Framework, SUSY, 據說也相當好用

    不過我對 SASS / Compass 完全不認識XD,還是用方便的 Bootstrap就好

    回應:
    那二天你們也辛苦了,而SASS並不困難,只是要花點時間想一下架構,
    就版型的部分,只要熟悉Bootstrap的結構,就可活用在各種版型中啦!
    而之後有任何問題,都歡迎隨時聯絡~