Angular 學習筆記 ( CDK - Layout )

簡單說就是 js 的 media query. 

1. BreakpointObserver 

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

layoutChanges.subscribe(result => {

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


CSS detect either iphone ipad or any other handheld

Determine the size of the application space grid of the Home screen

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

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

Detecting Breakpoints Using the Angular CDK

What size should my images be for a mobile site