響應式設計技術已經比3年前更加成熟而且有了更多的設計、測試工具和設計框架和樣式。

不過這些設計大部分用在一些閱讀、Blog、簡單門戶網站中，在電子商務領域少有涉及。

國內大中型電子商務網站基本上沒有使用響應式設計的技術。

不過，今天看到一個國外賣定制衣服的網站，這方面設計、實現得很不錯，值得借鑒。

網站首頁：

http://www.indochino.com

在PC上是排在一行的4個方塊導航到各個分類

在手機上則自動切換到列表模式（右邊帶方向箭頭）

商品展示頁面：

http://www.indochino.com/collection/Shirts

在PC上最上方是菜單欄，下面內容部分有兩列，左邊的分類導航列，右邊的商品展示列

隨著設備尺寸的縮小，首先商品展示列會由4列逐步遞減到2列。

然后左邊的列消失，該分類導航列變成了商品右上方的導航下拉菜單，如下圖：

另外請注意頂部的菜單欄變成了三橫的圖標（這是一個web設計模式:triple-line menu)，

其實是一個彈出菜單的效果，如下：

除了界面布局的變動外，還需要注意到該網站的縮略圖也處理得很恰當。

by iefreer

總結

以上是生活随笔為你收集整理的页面设计:响应式设计电子商务网站案例学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。