是什麼，爲什麼？
電腦顯示器有很多種尺寸，常見的有，1366px（寬度）、1980px（寬度），高級點，還有 2k 屏、4k 屏、5k 屏。如果再考慮平板和手機的話，就更多了。
遠古時期，大多數網站是不會考慮這個問題的，一般只會對特別流行的一個尺寸進行設計。這時候，屏幕特別小，或者特別大時，看着就很不舒服。
爲了照顧小屏幕、高分屏（高分辨率屏），就有人提出來“響應式”這種概念。
籠統來講，使不同尺寸、分辨率的屏幕，都能呈現出較好的效果，就是響應式佈局。
還有一個概念叫“自適應”，從目的上講，和“響應式”一樣。但是碼者不是一個那麼嚴謹的人，這裏就混作一談來。
本文記錄碼者開發中使用過的幾種自適應思路供同仁參考、討論，以及批評。
最簡單的方案（固定內容區寬度）
最簡單的方法，就是給網頁的內容區，設置一個寬度。比如 900px，然後內容區居中、兩邊留白。因爲大部分電腦顯示器的寬度都超過 900px，所以，不同的顯示器的差異，僅僅在於兩邊“留白”的大小。
雖然很簡單，但是確實效果不錯。碼者比較推薦這種方法，但可能是因爲簡單，很多人不屑於使用這種方法。
等比例縮放（rem）
這種方法的思路就是“大屏幕的字大點、小屏幕的字小點”。
其實這是一個看起來很合理的方法，但是在碼者看來是今天所討論的幾個方法中，最 low 的方法。
因爲很多時候，很難判定屏幕是大是小。
大與小，可以是像素的多與少，比如，1920px 寬的屏幕，比 1366px 寬的屏幕“大”；
但是，1920px 的屏幕有可能是 13 寸的，而 1366px 的屏幕有可能是 15.6 寸的。
也就是說，物理尺寸大的屏幕，像素尺寸可能更低。也就會出現這種情況：13 寸顯示器上的字體比 15.6 寸的還小。實際體驗上，有更多你想不到的 low 點。
但是在某些場景（比如移動端），還是很受用的。所以這裏記錄同比例縮放的一種實現方案——rem 方案。
不熟悉 rem 的同仁，可以參考這個簡介
整體思路
- 給根節點設置一個字體大小
- 然後，其他尺寸單位全部用 rem
- 然後，監聽屏幕的大小
- 然後，根據屏幕的大小按比例改變根節點字體的大小
因爲 rem 的特性，其他的尺寸都是根據根節點字體的大小設定的，所以，根節點字體大小一變，其他所有尺寸都會按比例變大、或小。
大部分瀏覽器的字體有個最小值：12px。也就是縮小到 12px 後，字體不會繼續縮小。
demo
最精準的方案（媒體查詢，@media）
整體思路
@media起到的作用是，你可以給不同尺寸的設備，設置單獨、互不影響的 css 屬性。
- 比如：屏幕寬度小於 500px 時（手機屏幕），怎樣怎樣
- 寬度在 500px ～ 1000px 時（平板屏幕），怎樣怎樣
- 寬度在 1000px ～ 1500px 時（電腦小屏幕），怎樣怎樣
- 寬度在 1500px ～ 2000px 時（普通電腦屏幕），怎樣怎樣
- 寬度在 ……
demo
點評
不同於上一種方案，這種方案，看起來並不是很有用，但實際應用中，它纔是響應式領域的霸主。因爲，有一個叫“柵格系統”的東西。
柵格系統（主流方案）
沒錯，柵格系統的基礎就是媒體查詢和浮動佈局。
但是由於柵格方案，比較複雜，於是決定日後單獨記錄一篇筆記。
應該使用哪一種方案？
遵循國際慣例：具體情況具體分析