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 我們

相關推薦:

Handling orientation in Xamarin Forms

CSS detect either iphone ipad or any other handheld

Is it possible to emulate orientation in a browser?

Media Query for iPad (Landscape) applied to Samsung Galaxy Tab 2 (Landscape) as well

How to Create a Landscape Page in a Portrait-Oriented Word Document

CSS media queries for screen sizes

Detecting Breakpoints Using the Angular CDK

常見移動裝置的 CSS3 Media Query 整理(iPhone/iPad/Galaxy/HTC One etc.)

css-tricks.com media query just not working

Expo大作戰(二十九)--expo sdk api之registerRootComponent(註冊跟元件),ScreenOrientation(螢幕切換),SecureStore,