自適應設計與響應式網頁設計的區別

目前非常流行自適應設計與響應式設計，而且經常讓人混淆，自適應設計不應與自適應佈局混為一談，它們是完全不一樣的概念。不妨來看看自適應設計與響應式網頁設計的區別到底在哪裏。以下僅供參考！

在這先説明下這兩者的異同：

自從移動終端飛速發展以來，各種各樣的機型突飛猛進，很多網站的解決方法，是為不同的設備提供不同的網頁，比如專門提供一個mobile版本，或者iPhone/iPad版本。這樣做固然保證了效果，但是比較麻煩，同時要維護好幾個版本，而且如果一個網站有多個portal（入口），會大大增加架構設計的複雜度。

於是，很早就有人設想，能不能"一次設計，普遍適用"，讓同一張網頁自動適應不同大小的屏幕，根據屏幕寬度，自動調整佈局（layout）？

2010年，Ethan Marcotte提出了"自適應網頁設計"（Responsive Web Design）這個名詞，指可以自動識別屏幕寬度、並做出相應調整的網頁設計。

自適應佈局有它的使用價值，在於它能夠提供一種更加實用的解決方案，使得項目的實現成本更低，並且更加易於測試。一個自適應佈局可以被看作是響應式佈局的一個更加廉價的替代品，會在項目資源緊缺的情況下更具有吸引力。

而在響應式佈局中你卻要考慮上百種不同的狀態:

響應式網頁設計是自適應網頁設計的子集。響應式網頁設計指的是頁面的佈局（流動網格、靈活的圖像及媒介查詢）。總體目標就是去解決設備多樣化問題。

響應式佈局等於流動網格佈局，而自適應佈局等於使用固定分割點來進行佈局。

當固定寬度與流動寬度結合起來時，自適應佈局就是一種響應式設計，而不僅僅是它的一種替代方法。

那麼如何進行響應式佈局呢？下面就一步步為你揭開響應式佈局的面紗：

Skill 1 學會運用 Css3 Media Queries，根據不同的屏幕分辨率，選擇應用不同的Css規則

Media Queries語法簡介：

max-width：若瀏覽區域的寬度小於400像素，則下方的CSS描述就會立即被套用：

1

2

3

4

5

@media screen and (max-width:400px){

s {

background:#ccc;

}

}

也可以把要套用的描述獨立成外部檔案：

1

Min Width：若瀏覽區域的.寬度大於800像素，則下方的CSS描述就會立即被套用：

1

2

3

4

5

6

@media screen and (min-width:800px){

s

{

background:#666;

}

}

Device Width：若瀏覽設備的可視範圍最大為480px，則下方的CSS描述就會立即被套用：(注：移動手機目前常見最大寬度為480px，如iPhone or Android Phone)

1

2

3

4

5

6

@media screen and (max-device-width:480px){

s

{

background:#000;

}

}

針對iPhone4提供專用的css設定檔：

1

針對iPad的Portrait Mode(直立)與Landscape Mode(橫躺)兩種瀏覽模式給予不同的css設定檔：

1

2

3

Skill 2 在網頁頭部加上viewport標籤

1

瀏覽器推出了“viewport meta”標籤，許多移動瀏覽器現在都支持這個標籤，W3C 協議定義 viewport meta 目前還屬於草案，很多人都會在html head 處加上 viewport 這個meta data，一個典型的移動端viewport如下所示：

1

該屬性可以控制視窗口寬度的大小。它可以被設置為實際的具體像素width= 600或為特殊設備設置寬度值。

viewport設置屬性如下：

width：可設定數值，或者指定為 device-width

height：可設定數值，或者指定為 device-height

initial-scale：第一次進入頁面的初始比例

minimum-scale：允許縮小最小比例

maximum-scale：允許放大最大比例

user-scalable：允許使用者縮放，1 or 0 (yes or no)

編譯過程會轉化成如下的語義：

1

2

3

4

5

6

7

@viewport {

width: device-width;

initial-scale: 1.0

}

device-width ，主要是為了讓整個頁面寬度與手機可視寬度相同，這樣就可以簡單相容於不同機型屏幕大小，如果這邊width沒有設定的話，就會依照html/css給予的width當作預設值。

因為解析度不同，device-width有時候不一定是view width，所以在類似iphone 4高解析度機器上，device-width=320 ，可是實際解析度為480，這時候就需要利用javascript針對UA下去做動態調整。

user-scalable，這個屬性可以讓使用者能否放大、縮小頁面，如果頁面不允許手機使用者縮放，就直接設定0或者no，反之要啟動縮放功能，就設置1或者是yes。

接下來將説明幾種常用的方式，以及具體例子提供給大家參考。

如果在手機端我們希望網頁呈現固定，不希望使用者隨意縮放，直接設定如下

1

如果希望在不同device使用不同縮放大小，就必須使用javascript，檢測UA(User agent)，動態設定viewport，如下：

1

2

viewport = ySelector("meta[name=viewport]");

ttribute('content', 'width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;');

Skill 3 不使用絕對寬度

由於網頁會根據屏幕寬度調整佈局，所以不能使用絕對寬度（margin-left:5px）的佈局，也不能使用具有絕對寬度(例如：width：200px)的元素,而最好使用百分比寬度width:20%;或者with:auto;

Skill 4 字體最好不要用絕對大小(px)，而使用相對大小(em)

1

body { font: normal 100% Helvetica, Arial, sans-serif; }

上面的代碼指定，字體大小是頁面默認大小的100%，即16像素。

1

h1 { font-size: 1.5em; }

h1的大小是默認大小的1.5倍，即24像素（24/16=1.5）

1

l { font-size: 0.875em; }

small元素的大小是默認大小的0.875倍，即14像素（14/16=0.875）

這裏順便説説 px pt em rem區別：

px是pixel，像素，是屏幕上顯示數據的最基本的點，在HTML中，默認的單位就是px；

pt是point，是印刷行業常用單位，等於1/72英寸。

em才是真正的“相對單位”（百分比嘛，當然是相對），而px和pt都是絕對單位（都有固定值）。所以，一般移動終端佈局用em比較合適。

rem是css3的出現，同時引進新的單位,而rem是相對於根元素，這樣就意味着，我們只需要在根元素確定一個參考值，在根元素中設置多大的字體，這完全可以根據您自己的需要。

Skill 5 流動佈局（fluid grid）

流動佈局的含義是各個位置都是浮動的，不是固定不變的

1

2

3

{ float: right; width: 70%; }

Bar { float: left; width: 25%; }

float的好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢出），避免了水平滾動條的出現。

Skill 6 圖片的自動縮放，等比縮放

1

2

3

4

5

img{

max-width: 100%;

}

要使圖片按等比縮放，一般不需要規定圖片高度。且最好不用background-image,因為這樣不會按照等比縮放。