自適應佈局和響應式佈局

記得第一次實際工做中接觸到響應式佈局排版以後，老大問了一個問題，自適應和響應式有什麼區別嗎？

本身理解的自適應佈局是把寬度px值換成百分比，文字px單位換算成em單位，而後解決在不一樣大小設備上呈現一樣的網頁，可是這樣屏幕太小，內容看上去就會很擁擠。以爲響應式聽上去和自適應會差很少。

當時也不懂爲何一樣的一個頁面要設計3版風格(pc,pad,phone)，以爲很麻煩，感受不知道從何開始下手。

　　而後就接觸到了下面這些內容:

　　一、meta標籤的viewport屬性

<meta name=」viewport」 content=」width=device-width, initial-scale=1,maximum-scale=1″ />

　　視窗寬度width=device-width;

　　視窗縮放initial-scale=1爲不可縮放狀態      maximum-scale=1 不可放大

　　

　　二、寬度的百分比或原px單位值換算成em單位

　　百分比計算公式：

目標元素寬度  ÷  上下文元素寬度  =  百分比寬度值

　　文字大小換算em計算公式：

目標元素px值  ÷  父元素font-size大小px值 = 結果值em

　　屬性值margin， padding等換算成em單位的計算公式：

目標元素px值  ÷  目標元素的font-size大小px值  =  結果值em

 

　　三、媒體查詢@media識別不一樣的屏幕寬度，並作出不一樣的佈局樣式來展示。

@media screen and (max-width:800px) {}
@media screen and (max-width:600px) {}

 

　　四、圖片的自適應

img{max-width: 100%; height: auto;}

 

（伊桑·馬科特（Ethan Marcotte）在2010年首先提出了響應式網頁設計（RWD,Responsive Web Design）這個術語。在他的一篇文章《Responsive Web Design · An A List Apart Article》中他將已有的三種發開技巧（彈性圖片，彈性網格佈局，媒體與媒體查詢） 進行了整合，命名爲響應式網頁設計。）

 注：響應式的概念覆蓋了自適應，可是涵蓋更多的內容。