 |
| adapt.js |
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
