關於網站前端開發在各個客戶端如何布局的問題？

12-31

不知道現在做網站前端是如何設計的，如何要同時滿足pc端和移動端的要求的話，一般是用響應式布局來兼容各個端呢還是不同的端分別設計一套？

移動和PC最大的差異是交互，而不是布局！所以，能不能用響應式簡單適配兩種終端，要看業務特徵。

純展示型業務，沒什麼交互，基本上就是頁面跳轉的，可以用響應式。要注意 響應式布局只是針對頁面展現而言的，而前端頁面是展現與交互並重，PC和移動的交互差異才是最頭痛的問題。在PC端有滑鼠懸停、右鍵、鍵盤組合鍵等交互操作，等到了移動端就完全不同了，有滑動、多點觸控，hold等。

Framework7 是一套針對移動端應用設計的UI框架，各位可以感受一下，這樣的界面設計，可能僅憑「響應式布局」就轉化為PC端產品么？來看一下截圖：

移動端大多以這樣的list或者信息流「卡片」為內容載體，這樣的設計任憑你怎麼「響應式」在PC上都很難看

移動端有這種「左右滑動調出上下文菜單」的交互設計，到PC端就是直接展現的了。

移動端有這種「下拉更新」，或者「觸底載入更多」，PC端是分頁按鈕

移動端的數據選擇控制項設計，最典型的包括日期選擇、地區選擇等組件，再想想PC端是怎麼設計的？

移動端輪播組件是手指滑動切換的，pc端要給它設計一個切換按鈕，用於滑鼠點擊，pc端還可能需要接收鍵盤事件來左右翻頁

移動端還有這種action菜單，pc端一般都是dropdown組件

還有很多很多這樣的例子，會讓你感覺PC和移動是完全不同的GUI設計。如果還認為「響應式可以拯救多終端」那就不妨做個思維實驗，就是對著framework7的示例想像一下把它完美轉換為PC應用是一種什麼樣的界面設計和交互設計，然後再想想這個工程量是不是僅僅通過「響應式布局」就能解決的。

所以，我個人的經驗是標準的web應用，出於對性能和交互體驗的考慮，應該將PC和移動端分開開發，各自根據平台設計不同的界面和交互，用以實現最極致的用戶體驗。

那些聲稱做到了多終端響應式布局的網站，大都會讓人覺得有點怪：PC下感覺太「輕」，移動端又感覺太「重」。因為它們試圖在二者交互方式的交集中尋找平衡，兩種平台下的設計都將受到制約。

===========【補充】===========

我並非否定響應式，我覺得響應式的正確用法是 同類型終端的界面布局適配方案，而不是 跨終端的應用適配方案。也就是我們在移動端（或者PC端）為了適應不同尺寸的屏幕而使用響應式來微調布局是非常不錯的思路，但想利用響應式解決跨終端問題，我覺得還是太過牽強。

三四年過去了，竟然還有人相信響應式布局可以解決PC和移動端的差異？

如果只是以展現為主的頁面，可以通過響應式布局來完成；

但是如果是業務邏輯較強的頁面，PC端業務和移動端業務分開做才是明智之舉，畢竟全站做響應式布局是很麻煩的一件事

主要還是看應用場景，要是重交互、體量大的網站，比如電商之類的，就不適合做響應式，如果是展示為主，體量小的網站，響應式還是非常適用的，一般的中小企業官網就很適合。

當初有個哥給我說用響應式可以解決多終端問題！還好我機智跑得早

首先從問題來看你是做b/s。pc端之前都用的是固定大小，然後再從手機端開發一個wap。就是你說的開發兩套。但是現在有些前端只用一個響應式布局就行了。這樣一套前端都可以用。例如知乎wordpress一些主題……我之前用過bootstrap這個框架，感覺還是很好的。但是問題就在於，響應式布局很難控制，如果頁面過於複雜，那麼很容易出現各種問題。如果沒有app這個東西的話，那麼響應式布局現在一定成為主流了。可是問題在於，如果你有app,那麼估計沒有多少人會去瀏覽器上看你的東西，所以手機網頁又顯得多餘……但是個人覺得響應式布局是未來的趨勢吧，html5將會解決人任何事情。另外，也許你的app直接載入你的網頁的話，這樣也好