最近應用在專案上的adapt.js

adapt.js
[此圖截圖來源:http://adapt.960.gs/]



adapt.js是什麼?
adapt.js其實一個蠻輕量的JavaScript,可以透過使用他,實現在不同px的螢幕大小,載入不同的css。我想透過他實現RWD的網站,不過adpat.js的原意應該不是針對RWD,是我自己想要這麼用。
因為RWD的精神涉及兩件事情,第一件事是浮動的寬度(fluid width,或稱流體寬度); 第二件事是@Media Query。而我覺得adapt.js強調的是管理css,可以一目瞭然地看出在何種條件下載入哪一支CSS.



寫法:
主要的sample寫法如下:
 // 寫入符合你的網站需求的設定 
 var ADAPT_CONFIG = {  
  // 在這裡設定你的css資料夾路徑 
  path: 'assets/css/',  
  // 是否要動態載入?  如果是false,只會在網頁第一次load進來的時候跑那一次  
  // 如果是true,那就會去監聽window的resize,當你改變你browser大小的時候,就會去偵測網頁size載入不同css
  dynamic: true,  
  //然後你可以自己寫callback,不過這部分我還沒試過
  callback: myCallback,  
  // 接下來設定range的範圍跟相對應的css
  // Separate ranges by "to" keyword.  
  range: [  
   '0px  to 760px = mobile.css',  
   '760px to 980px = 720.css',  
   '980px to 1280px = 960.css',  
   '1280px to 1600px = 1200.css',  
   '1600px to 1920px = 1560.css',  
   '1940px to 2540px = 1920.css',  
   '2540px      = 2520.css'  
  ]  
 };
<script src="assets/js/adapt.min.js"></script>  

寫完後別忘了也要載入adapt.min.js
<script src="assets/js/adapt.min.js"></script>

Sample可以參考:https://github.com/nathansmith/adapt/blob/master/index.html
  • 不過網站上預設下載下來的css是有包含960的,這點我沒有注意到,如果不想走960,那就自己開空白檔也是ok,反正adapt.js的重點是幫你載入不同的css。
  • 只要在js把range定義出來,就會依照你所定義的px範圍去載入相對應的css。
  • 這裡的css命名,可以不用跟他一模一樣,720.css你也可以改命名為tablet.css還是其他的都ok。
  • 為什麼要使用adapt.js,純粹就只是想嘗試一下用js控制載入不同css,用這種方式避免寫Media Query,我自己是沒親自寫過media query,但是看過那種寫法還真的是有點害怕..,老實說我是還蠻喜歡adapt.js的這種管理載入css的方式。
  • 你也可以參考這篇文章:ADAPT JS EXPLAINED



留言

這個網誌中的熱門文章

[Android] 筆記 手機上測試自己的 APP

解決fatal: Not a git repository (or any of the parent directories): .git錯誤

[Android 筆記] 設定 ImageView 的圖檔來源