文章彙整

使用adapt.js快速將您的網站變成響應式網站

By Astral Web 3 years agoNo Comments
首頁  /  網站設計與開發  /  使用adapt.js快速將您的網站變成響應式網站

00

響應式網站是目前建站的趨勢,但如果您原本已經有個網站了,又暫時還不打算另外建立新站,您可以考慮使用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

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  網站設計與開發

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。