最近應用在專案上的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