SAP Spartacus的Responsive和adaptiv

官网链接

The SAP Commerce back end supports multi-site implementations, and can be configured to have different content (catalogs) for different sites.

Commerce后台支持多site实现，不同的site可以配置不同的content catalog.

每个breakpoint可以配置不同的slots.

下图的例子是为extra-small这个breakpoint定义的layout配置：

const defaultLayoutConfig: LayoutConfig = {
  header: {
    slots: [
      'FirstSlot',
      'SecondSlot',
      'LastSlot'
      ],
    xs: [
      'LastSlot',
      'FirstSlot'
      ]
  }
};

响应式设计()和自适应设计，是web应用的用户体验领域两个容易混淆的概念，因为二者都是为了解决网页在不同屏幕尺寸的设备上展示的问题。从编程角度讲，响应式设计通过各宗前端技术，为页面元素赋予根据屏幕分辨率的变化而自动调试显示行为以达到最佳显示效果的能力，例如Spartacus里的列表控件，随着屏幕宽度的减小，显示的列表栏的数目也随之减少。而自适应设计，即为不同类别的设备分别实现不同的页面，检测到设备分辨率后调用对应的网页。Spartacus的页面设计绝大部分是响应式布局，但也支持自适应布局的特性。Commerce的CMS模块将Storefront UI按照功能上的逻辑相关性划分成不同的区域，而Spartacus可以允许使用者根据不同的屏幕尺寸，配置在该尺寸下，不同的区域内应该显示哪一些UI Component.