使用adapt.js快速將您的網站變成響應式網站
響應式網站是目前建站的趨勢，但如果您原本已經有個網站了，又暫時還不打算另外建立新站，您可以考慮使用adapt.js快速將您的網站轉換成響應式的網站。
adapt.js 的作用是依據螢幕的寬度載入不同的CSS檔案，藉此讓網站達到響應式的效果。原理與media queries相同，都是依螢幕寬度判斷使用不同的樣式(CSS)，不同的地方在於：adapt.js將不同的設定寫在不同的檔案內，再依螢幕寬度載入不同的CSS檔案；media queries是將CSS寫在同一個檔案內，依螢幕的寬度決定使用某一段特定的CSS設定。
adapt.js的優點
因為是將css設定寫在一個特定的檔案裡，對於剛接觸響應式設計的人來說比較容易掌控。
adapt.js的缺點
在調整螢幕尺寸的時候，有可能因為要載入不同的CSS檔案造成螢幕”閃一下”的狀況。
如果，要避免這個情況可以將共同的CSS獨立出來並先行載入( 例如背景、文字、顏色等 )，接著再載入受螢幕寬度影響的CSS。如果便可降低”閃一下”的狀況。
adapt.js 實例
<!DOCTYPE html>
<html lang="tw">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<title>Adapt.js - 示範</title>
<link rel="stylesheet" href="css/basic.css" /><!-- 共用的樣式 -->
<noscript>
<link rel="stylesheet" href="css/default.min.css" /><!-- 不支援js時使用的CSS檔案 -->
</noscript>
<script>
var ADAPT_CONFIG = {
// CSS路徑
path: 'css/',
// false = 只在頁面開啟時執行一次.
// true = 當螢幕尺寸調整時、重新執行.
dynamic: true,
// 先從小尺寸的CSS開始設定.
range: [
'0px to 760px = mobile.min.css',
'760px to 980px = 720.min.css',
'980px to 1280px = 960.min.css',
'1280px to 1600px = 1200.min.css',
'1600px to 1940px = 1560.min.css',
'1940px to 2540px = 1920.min.css',
'2540px = 2520.min.css'
]
};
</script>
<script src="js/adapt.min.js"></script>
</head>
<body>
網站內容
</body>
</html>
adapt.js official site: http://adapt.960.gs/
adapt.js on github: https://github.com/nathansmith/adapt
我要留言