SAP Spartacus里定义的breakpoint

按照惯例，不同尺寸的屏幕对应的breakpoint：

Spartacus layout-config.ts文件：

export enum BREAKPOINT {
  xs = 'xs',
  sm = 'sm',
  md = 'md',
  lg = 'lg',
  xl = 'xl',
}

这些枚举值被用于LayoutBreakPoints的类型定义：

默认的breakpoints定义：

export const defaultLayoutConfig: LayoutConfig = {
  breakpoints: {
    xs: 576,
    sm: 768,
    md: 992,
    lg: 1200,
    xl: {
      min: 1200,
    },
  },
};

In our repo we tend to use the reusable mixin with the already defined breakpoints (i.e. sm, sx), i.e. @include media-breakpoint-down(xs) (or …-up()) instead of using native @media queries.

The screen layout of the Storefront is driven by configurable breakpoints.

The breakpoints have a configurable screen size (i.e. < 576px), and associated screen name can be used to further define the layout.

A good example is the page template slot configuration, which can be adjusted per screen name, so that the layout differs per screen size (i.e. mobile vs desktop).

Other features can however also use the screen names to further enhance rendering of the feature. A good example is the table component, which has a configurable list of headers, based on the screen.

The creation of screen specific DOM is what we call adaptive design. This design is optimized for small screens, but is also optimized for accessibility.

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