近期在做web后臺頁面設計，之前的設計稿均是基于1920x1080分辨率設計的，但是實際用戶很多是使用1280分辨率的電腦和筆記本，而之前的設計稿直接運用的話，在小屏會有滾動條，需要針對小屏進行適配。
之前對響應式設計和柵格屬于一知半解，此次詳細了解了一下，填了幾個之前認識不足的誤區，也感覺柵格和響應式設計并不是萬能的。
一、響應式的目的
二、柵格的目的
三、僅web端的適配
一、響應式的目的
響應式是2010年推出，主要目的是為了滿足PC — 平板 — 手機的適配，分辨率跨度較大。
響應式布局的三大核心：媒介查詢——根據當前分辨率和可視區域判斷所處區間；流式布局——在區間之間自動變換寬度；彈性圖片——圖片縮放保持不變形。
響應式的優點在于：方便改動，因為設計時都是基于一套的。
響應式的缺點在于1.需要同時加載多套CSS，影響加載速度。2.響應式最初的目的是從web端降到移動端并保證體驗，換句話說，實際移動端的體驗是類似web端的，完全比不上一開始就基于移動端設計的。
因此響應式在2015-2017年比較火爆，個人感覺最近幾年開始減少(一個比較明顯的趨勢就是網上響應式相關的文章大多是17年左右的，近兩年的文章大多是對以前文章的復制黏貼或者總結）。隨著web端的衰弱和移動端的興起，更多公司傾向于為APP端單獨進行設計，給用戶更好的體驗。
二、柵格的目的
如果要做響應式，就需要基于柵格。但不做響應式的話，柵格不是必須的，而且柵格對于開發和設計是有區別的。
對開發者而言柵格是實現動態布局的手段，類似于百分比布局，實際需要提前溝通是否引入了bootstrap等。iview和ant design均采用了bootstrap4的規范，柵格的斷點是1600,1200，992等。柵格主要是針對盒子的，盒子里的內容并不強制柵格。
對設計師對于柵格的理解源自平面設計中的柵格，核心思想是比例。運用柵格的目的是得到一種統一性和韻律性的美感，另一方面也有依據，更容易規范化。但是設計時往往基于某一分辨率，不容易兼顧多種分辨率。而運用柵格后，雖然盒子的比例固定，但內容的比例可能會隨著分辨率變化而失調，導致不美觀。
因此一方面在具體落地中視角的不同就容易造成偏差，最終影響還原度，繼而增加溝通成本，另一方面柵格更適合多列結構的組件化頁面。設計時盡量多考慮開發的實際效果，并且局限于柵格束住了手腳。
三、僅web端的適配
web端的適配有如下的發展歷史：靜態布局、流式布局+彈性布局、響應式布局。
靜態布局：用px做單位，設立min-width。小于最小寬度時出現滾動條，大于寬度時內容居中加背景。
流式布局：寬度采用百分比，高度和文字采用px。比較常見的例子如qq郵箱，阿里云后臺，百度控制臺。
缺點是如果屏幕寬度跨度太大，那么大分辨率和小分辨率的樣式可能會差得很多，1280分辨率顯得偏擁擠而1920以上分辨率顯得太空太散。
一種解決辦法是其中某些內容的間距采用固定px而不是百分比。
彈性布局：采用em或者rem，這樣高度和文字也會縮放。比較常見的比如騰訊視頻，騰訊新聞。
采用@media查詢分辨率，在1280，1440這兩個斷點切換font-size從而導致整個版面縮放。而在斷點之間采用流式布局。
響應式布局：根據分辨率設置斷點，在斷點之間采用靜態或流式布局。斷點的切換可以變換font-size，也可以改變頁面布局（比如4列變3列）。
結論：后臺設計一般不考慮移動端適配，因此個人建議后臺設計優先考慮流式布局。如果流式布局在1280和1920分辨率難以協調，則考慮響應式布局。在1440加入斷點，改變布局或者縮小font-size。
