zoukankan      html  css  js  c++  java
  • Angular 学习笔记 ( CDK

    简单说就是 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- 599px) and (orientation: portrait), ' +
               '(max- 959px) and (orientation: landscape)',
      Tablet: '(min- 600px) and (max- 839px) and (orientation: portrait), ' +
              '(min- 960px) and (max- 1279px) and (orientation: landscape)',
      Web: '(min- 840px) and (orientation: portrait), ' +
           '(min- 1280px) and (orientation: landscape)',
    
      HandsetPortrait: '(max- 599px) and (orientation: portrait)',
      TabletPortrait: '(min- 600px) and (max- 839px) and (orientation: portrait)',
      WebPortrait: '(min- 840px) and (orientation: portrait)',
    
      HandsetLandscape: '(max- 959px) and (orientation: landscape)',
      TabletLandscape: '(min- 960px) and (max- 1279px) and (orientation: landscape)',
      WebLandscape: '(min- 1280px) and (orientation: landscape)',
    };

    2. MediaMatcher

    这个是底层服务,breakpoint 就是建立在这个之上的. 

    它没有 observe 只能单纯匹配 media query, 而它的实现原理就是调用了 dom api Window.matchMedia.

    所以到这里可以体会到, cdk 帮我们解决了调用 dom api 的烦恼. 写 ui 组件操作 dom 是必然的. 而兼容跨平台问题也是必然的. 

    cdk 的目的就是要减轻我们这方面的麻烦. 

  • 相关阅读:
    Top的VIRT是什么
    python的日志logging模块性能以及多进程
    Python的多进程锁的使用
    extjs动态导入
    初识Dubbo 系列之5-Dubbo 成熟度
    POJ 2151 Check the difficulty of problems(概率dp)
    自考
    疯狂Java学习笔记(70)-----------挚爱Java
    2014年辛星解读css第三节
    atitit。流程图的设计与制作 attilax 总结
  • 原文地址:https://www.cnblogs.com/keatkeat/p/7821180.html
Copyright © 2011-2022 走看看