layout 响应式布局工具
- Breakpoints 屏幕尺寸
- BreakpointObserver 观察器
- MediaMatcher 媒体查询匹配
import { Component, OnInit } from "@angular/core"; import { BreakpointObserver, BreakpointState, MediaMatcher, Breakpoints } from "@angular/cdk/layout"; import { Observable } from "rxjs/Observable"; @Component({ selector: "layout", templateUrl: "./layout.component.html", styleUrls: ["./layout.component.scss"] }) export class LayoutComponent implements OnInit { isHandset: Observable<BreakpointState>; constructor(public breakpointObserver: BreakpointObserver, public media: MediaMatcher) {} ngOnInit() { // 手持设备 let Handset = Breakpoints.Handset; // 手持landscape屏 let HandsetLandscape = Breakpoints.HandsetLandscape; //手持portrait屏 let HandsetPortrait = Breakpoints.HandsetPortrait; // 多媒体 let Medium = Breakpoints.Medium; // 平板电脑 let Tablet = Breakpoints.Tablet; // 平板电脑 Landscape let TabletLandscape = Breakpoints.TabletLandscape; // 平板电脑 Portrait let TabletPortrait = Breakpoints.TabletPortrait; // web let Web = Breakpoints.Web; // web landscape let WebLandscape = Breakpoints.WebLandscape; // web portrait let WebPortrait = Breakpoints.WebPortrait; // 大屏幕 let Large = Breakpoints.Large; // 更大屏幕 let XLarge = Breakpoints.XLarge; // 更小屏幕 let XSmall = Breakpoints.XSmall; // 小屏幕 let Small = Breakpoints.Small; // 是否满足多个条件 this.breakpointObserver .observe([ Handset, HandsetLandscape, Handset, Medium, Tablet, TabletLandscape, TabletPortrait, Web, WebLandscape, WebPortrait, Large, XLarge, Small, XSmall ]) .subscribe(res => { console.log(res); });
this.breakpointObserver .observe(Breakpoints.Handset) .subscribe((state: BreakpointState) => { if (state.matches) { console.log('手机设备尺寸内'); } else { console.log('非手机设备尺寸内'); } }); } }