## 自適應、響應式、彈性布局、屏幕適配 [淺談響應式Web設計與實現思路 – 熊建剛的博客](http://blog.codingplayboy.com/2018/01/06/responsive-web-design/) [淺談響應式Web設計與實現思路](https://www.toutiao.com/a6508149161299280398/?tt_from=weixin&utm_campaign=client_share&timestamp=1515350460&app=news_article&utm_source=weixin&iid=22069500288&utm_medium=toutiao_android&wxshare_count=1) ~~~ 自適應vs響應式 自適應和響應式設計的不同主要概括如下： 自適應是多套用戶界面，而后者則只有一套用戶界面； 自適應需要服務端檢測請求設備分辨率相關信息，然后選擇對應版本返回； 自適應可以在不同版本使用不同適配方案，如在PC端使用百分比，在移動端使用rem等，而響應式則需要一個完美兼容的適配方案； ~~~ ~~~ 什么樣的網頁適合做成響應式的？ 1. 頁面結構不復雜的 2. 輕交互的 3. 展示型的 具體適合的類型 官網類（奈斯設計） 新聞類（懶熊體育） 輕博客類 產品展示類（app下載頁面） 閱讀類（看云） （當然也不是說只要是這些類型的網頁就都適合做響應式，這只是一般情況下，具體還是要看網頁是否滿足做響應式的幾個基本條件） 不適合做響應式的類型，只能做自適應的 電商（比如商品詳情頁交互多） 重門戶類（比如網易，雖然是新聞類，但是這種門戶首頁頁面結構復雜，模塊很多，做響應式成本太大，效率很低，得不償失） 重官網類（比如阿里云，它的頁面也很復雜，元素很多，做響應式也不現實，但里面的幾個頁面做成響應式還是可行的） 不能做的不是技術做不到而不能做，css無所不能，理論上都可以做成響應式的，但是這種無視成本的做法是愚蠢的，就像是撿個芝麻丟了西瓜。 總結：做響應式的網頁必須要滿足：結構簡單，交互簡單，兩個字來說就是“要輕”。 ~~~ > 常規的響應式頁面是基于同一套html，利用css媒體查詢 寫多套css樣式來實現的，通常這個方法很奏效，但如果頁面比較復雜，有些組件在不同端的交互和頁面結構有很大的區別時，依靠css媒體查詢魔法就很麻煩了，所以可以看到現在很多網站，在一個頁面上輸出了 多套html（騰訊文檔頁面就大量使用了多套html），同樣的還是利用css媒體查詢控制不同屏幕顯示不同的html，比如 `pc-nav`、`mobile-nav`，這樣比較靈活，但也有弊端，那就是如果都這么做，那就相當于每次用戶訪問都同時加載了多套html頁面，用戶甚至永遠不可能用到，雖然用戶看不到這些多余的，也不關心背后的html，可是這必然增加了加載的開銷導致頁面打開速度下降，所以這種方法只能用于「在多端上交互和視覺差異較大」的組件上去，不能使用過度，不然為什么不使用自適應方案呢。 > > 電腦背面的電路板也應該整齊完美，雖然用戶看不到，但我們知道。 —— 史蒂夫·喬布斯 [B站不是中國YouTube](https://mp.weixin.qq.com/s/PyKInjunP2CIRZFguap9Yw) > YouTube的產品理念則是移動優先，桌面端是移動版的從屬，PC端同移動統一。即以前手機版是“縮小的桌面網頁”，現在桌面版是“放大了的手機App。“不應該為不同的屏幕規格創建不同的產品，而是使用一種統一的設計方法開發一款可以跨多種屏幕的產品。” > PC 和 移動端 同樣重要，應該利用各自的特點，充分發揮其優勢，全方面提供最好的用戶體驗，而不是 簡單的 “統一”，誰是誰的附屬品。 > 特別注意的是margin,padding屬性值為百分比時，是基于當前元素width值的。%單位也是一個縮放單位，所以也常用于樣式適配。**利用 padding 這個特性，我們就可以實現 [div寬高等比適應](https://blog.csdn.net/qq_38350907/article/details/78677611)了，就像img標簽一樣的效果** >[tip] 錯！！！只有padding才是基于當前元素的，margin和width一樣，都是基于父元素的。 >[danger] **自適應和響應式不是一個東西。** > 自適應、響應式、適配都是為了展示最好的前端效果，即在每一種設備上，都極力呈現出最好的效果。**這個最好的效果，指的是，在各終端表現出最好的視覺效果，以及最合適、最方便的操作習慣。** **自適應、響應式、彈性布局、屏幕適配，這是四個獨立不同的概念。** 自適應：多端請求時返回不同的頁面，服務端需要準備多套程序或者多套模板。 響應式：主要是利用css媒體查詢使得在不同屏幕大小下，頁面有不同表現，主要是元素布局等變化。 彈性布局：主要是利用百分比設置元素寬度，浮動還有flex設置元素布局等等。 屏幕適配：主要是應用于對完美還原設計稿尺寸有要求的頁面，主要是利用 flexible.js、rem、vm等技術。（類似于750px的設計稿是一張圖片，這張圖片無論怎么縮放，都能顯示很好的效果，**現在我們的網頁也需要圖片這種等比縮放的效果**，這么說你應該能體會到了。當然了，這里還需要順便解決高清屏顯示的問題。） ***** ### 技術方案怎么選 #### 1. 簡單 & 對速度不敏感和對代碼精簡沒要求 & 預算緊張 響應式，一套代碼解決多端 展示閱讀類 交互邏輯簡單且少，**且移動端與pc端內容差異不大**，如新聞站，企業官網 #### 2. 復雜 & 對精簡代碼和速度有要求 預算充足 做兩套 根據請求頭自適應返回 web端 手機端 （后端可共用，也可不共用，如不同模塊或者部署不同應用） 功能類，交互邏輯復雜且多，如電商，社交類 #### 3. 復雜 & 有多終端適配要求 & 對細節有一定要求 追求用戶體驗 & 預算豪華 做兩套 移動端用適配做以滿足不同移動終端 #### 4. 復雜 & 細節要求和技術追求極高 & 追求極致完美的用戶體驗 & 不差錢 （藝術家、哲學家） 多端 多套 響應式 適配 多技術相結合 * * * * * [關于響應式布局，你必須要知道的](https://mp.weixin.qq.com/s/y0a5t3Kd-GWACRlEg1cprQ) ***** last update：2019-1-25 17:10:25