自適應與相應式有什麼區別

先給大家體驗一下響應式和自適應的區別，請放大縮小一下螢幕嘗試

自適應的體驗、響應式的體驗

自適應是為了解決如何才能在不同大小的裝置上呈現同樣的網頁，比如我們css用到的rem就是自適應。根據根元素的fontsize來自動調整大小。

響應式是讓同一張網頁自動適應不同大小的螢幕，根據螢幕寬度，自動調整網頁內容大小其實就是準備兩套不同的css**，根據**查詢判斷執行哪套，但是無論怎麼樣子，他們的主體的內容和布局是沒有變化的。

自適應還是暴露出乙個問題，如果螢幕太小，即使網頁能夠根據螢幕大小進行適配，但是會感覺在小螢幕上檢視，內容過於擁擠，響應式正是為了解決這個問題而衍生出來的概念。它可以自動識別螢幕寬度、並做出相應調整的網頁設計，布局和展示的內容可能會有所變動，但是就是工作量大，**量多

響應式布局的一些技術點紀錄：

1. 允許網頁的寬度自動的調整

2. 盡量少使用絕對的寬度，多點百分比

3. 相對大小的字型:字型不要使用px寫死，最好使用相對大小的em，或者高畫質方案rem，這個不限制與字型，別的屬性也可以這麼設定

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

5. 選擇載入css，，這個意思是如果螢幕寬度小於400畫素（max-device-width: 400px），就載入tinyscreen.css檔案。