響應式佈局和自適應佈局的不一樣

起初，網頁設計者都會涉及固定寬度的頁面，後來隨着顯示器愈來愈多，以及筆記本的普及，這時固定寬度的web頁面就沒法知足，各設備的要求，因而就出現了一種新的佈局方式————寬度自適應佈局。咱們日常討論的寬度自適應佈局，大多指的就是寬度自適應佈局。這種佈局出現了兩種流派：百分比寬度佈局 和 流式佈局。 百分比寬度佈局是：寬度使用百分比，文字使用em，如今也不少使用rem了，也就是所謂的高清方案。 流式佈局是：以Google爲表明的方法，漸進加強。不過已經中止了。

---

一開始並無響應式佈局這個詞語，可是慢慢就出現了一個詞——漸進加強，新詞的出現老是伴隨的舊詞一塊兒出現，就比如3G網絡出現以前，沒人知道本身手機用的是2G網絡。因此3G和2G是一塊兒出現了，技術上固然是2G技術先出現。同理，漸進加強出現以後，另外一個詞[優雅降級]也隨之出現了。

不由有人問，「真的要給每個手機分別設計一個網頁嗎？」，「真的要給電腦PC和手機分別設計不一樣的網頁嗎？」

那倒不用 響應式佈局 就能夠搞定

響應式佈局和自適應的區別：

1.首先兩種的方式的解決問題是不同的。

自適應是爲了解決如何才能在不一樣大小的設備上呈現相同的網頁。手機的屏幕比較小，寬度一般在600像素如下，pc的像素通常在1000像素以上，部分配置高的筆記本在2000像素以上的也有，一樣的頁面要顯示在不一樣的設備上面，還要呈現出滿意的效果，不是一件容易的事情。所以就有人想出了一個辦法，能不能"一次設計，廣泛適用"，讓同一張網頁自動適應不一樣大小的屏幕，根據屏幕的寬度，自動調節網頁的內容大小，可是不管怎麼樣子，他們的主體的內容和佈局是沒有變化的。

2.響應式的概念覆蓋了自適應，可是包括的東西更多了。響應式佈局能夠根據屏幕的大小自動的調整頁面的展示方式，以及佈局。

3.自適應仍是暴露出一個問題，若是屏幕過小，即便網頁可以根據屏幕大小進行適配，可是會感受在小屏幕上查看，內容過於擁擠，響應式正是爲了解決這個問題而衍生出來的概念。它能夠自動識別屏幕寬度、並作出相應調整的網頁設計，佈局和展現的內容可能會有所變更。

4"自適應網頁設計"的核心，就是CSS3引入的Media Jquery模塊。 它的意思就是，自動探測屏幕寬度，而後加載相應的CSS文件。

1 <link rel="stylesheet" type="text/css"
2 　　　　media="screen and (max-device-width: 400px)"
3 　　　　href="tinyScreen.css" />
複製代碼

說了一大堆，其實你們可能更多的是關心如何去實現。下面來聊一聊實現方式：