Angular 學習筆記 ( CDK - Layout )

簡單說就是 js 的 media query. 

1. BreakpointObserver 

const layoutChanges = this.breakpointObserver.observe([
  '(orientation: portrait)',
  '(orientation: landscape)',
]);

layoutChanges.subscribe(result => {
  updateMyLayoutForOrientationChange();
});

ng 還包裝了一個 observe 方便我們監聽 view port 的變化. 

此外 ng 也依據 material 的標準提供了一個 enum 方便我們寫匹配. 

export const Breakpoints = {
  Handset: '(max-width: 599px) and (orientation: portrait), ' +
           '(max-width: 959px) and (orientation: landscape)',
  Tablet: '(min-width: 600px) and (max-width: 839px) and (orientation: portrait), ' +
          '(min-width: 960px) and (max-width: 1279px) and (orientation: landscape)',
  Web: '(min-width: 840px) and (orientation: portrait), ' +
       '(min-width: 1280px) and (orientation: landscape)',

  HandsetPortrait: '(max-width: 599px) and (orientation: portrait)',
  TabletPortrait: '(min-width: 600px) and (max-width: 839px) and (orientation: portrait)',
  WebPortrait: '(min-width: 840px) and (orientation: portrait)',

  HandsetLandscape: '(max-width: 959px) and (orientation: landscape)',
  TabletLandscape: '(min-width: 960px) and (max-width: 1279px) and (orientation: landscape)',
  WebLandscape: '(min-width: 1280px) and (orientation: landscape)',
};

 

2. MediaMatcher

這個是底層服務,breakpoint 就是建立在這個之上的. 

它沒有 observe 只能單純匹配 media query, 而它的實現原理就是呼叫了 dom api Window.matchMedia.

 

 

 

所以到這裡可以體會到, cdk 幫我們解決了呼叫 dom api 的煩惱. 寫 ui 元件操作 dom 是必然的. 而相容跨平臺問題也是必然的. 

cdk 的目的就是要減輕我們這方面的麻煩. 

 

關鍵詞:px width and orientation max min landscape portrait cdk 我們

相關推薦:

移動端問題總結(轉)

web圖片

css橫屏問題的設定

媒體查詢相關

Android 7.1 WindowManagerService 螢幕旋轉流程分析 (二)

A new Sugar UX coming in Winter ’18

Solving over 35 performance issues in React Native

Android onConfigurationChanged用法(規避橫豎屏切換導致的重新呼叫onCreate方法)

swift 螢幕的翻轉 + 狀態列(statusBar)的隱藏

WindowUtils【視窗工具類】