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 的目的就是要減輕我們這方面的麻煩. 

 

關鍵詞:width px nbsp orientation min min-width max max-width landscape portrait

相關推薦:

The min/max-width media query doesn't make grammatical sense

CSS Media Query not responding

HTML responsive font size for mobile devices

How can i make the responsive design using CSS?

Widths to use in media queries

Angular Flex Layout: The Masquerade

Writing Media Queries with Sass mixins

Can Scss mixins be responsive

What is the best practice with media-queries in CSS3?

Browser not recognizing max-device-width