關于 Mobile First 的概念，請查看我這篇文章：什么是前端開發中的 mobile first 策略.

下圖是 SAP 電商云 Spartacus UI 的搜索結果頁面：

其布局設計：template: SearchResultListPageTemplate

Section2 就是上圖這塊黑色的條幅。

ProductLeftRefinements：左邊這塊區域。

facet：

template 的定義：

對應的 css：

在 Chrome 開發者工具里將當前設備模擬成 mobile 之后，左邊的 ProductLeftRefinements 就消失了：

在手機上，我們需要顯式點 filter by，才能打開 facet：

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的Mobile first 设计思路在 SAP 电商云 Spartacus UI 中的设计体现一例的全部內容，希望文章能夠幫你解決所遇到的問題。

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