问题背景
登录界面:
因为之前登录框设置的是相对地位，所以在浏览器页面放大后，登录框的地位会缩到看不见的中央。
比方left字段，设置的是370px。 当页面宽度放大至400左右时，登录框就会因为向右偏移了370px,而导致登录框隐没。
.loginBox { background-color: #F0F4F6; /*上divcolor*/ border: 1px solid #BfD6E1; border-radius: 5px; color: #444; margin: auto; width: 388px; height: 400px; left: 370px; top: 200px;}之后想谷歌找一下相干的解决办法，没有搜到，也可能是关键词不对。
于是想尝试当页面缩放时，动静地批改css款式。
Angular 获取页面缩放事件
什么是 BOM
首先咱们要理解BOM。
BOM ( Browser Object Model )即浏览器对象模型, 它提供了独立于内容而与浏览器窗口进行交互的对象,其外围对象是window。
另外BOM是浏览器厂商在各自浏览器上定义的,各个浏览器会有不一样的中央。
window窗口有很多事件，比方有:
Scroll： 鼠标滚轮滑动事件
Back: 页面后退
Resize：窗口大小变更
等
BOM比 DOM更大，它蕴含DOM
能够形象地表述：
window对象是浏览器的顶级对象,它具备双重角色。
1.它是 JS 拜访浏览器窗口的一个接口。
2.它是一个全局对象。 定义在全局作用域中的变量、函数都会变成window对象的属性和办法。
例如，在控制台定义一个name
监听window的 resize事件
Resize：窗口大小变更。 就是本次咱们须要监听的指标
在Angular中，咱们能够应用 Observable 类提供的 fromEvent 函数来监听resize事件
代码：
ngOnInit(): void { fromEvent(window, 'resize') .pipe(throttleTime(50), debounceTime(50)) .subscribe((event) => { console.log('页面变动了'); }}后果：
当调整窗口大小时，控制台打印。 能够看到window也有的这个属性。
动静扭转款式
angular中有好几种形式能够动静地扭转款式。
这里先说说我用的第一种：
不操作DOM 应用 ngStyle
外围：
ts:
private widthTemp : string = "100px";private backgroundTemp : string = '#000'; // 想要更改款式时间接更改 changeClass的值。this.widthTemp = '200px;';this.backgroundTemp = '#069'html:
<div [ngStyle]="{'background-color':backgroundTemp,'width': widthTemp}">></div>其用法和 一般标签中的 style 属性相似，只不过angular 将其做成了动静绑定的模式。<h1 style="text-success">test</h1>
代码实现：
html
<thy-card [ngStyle]="{'width': width, 'height': height, 'top': top, 'left': left}"> ts:
// 动静扭转临界值widthInit = 1200;heightInit = 400;// 初始值width: string = "350px";height: string = "400px";left: string = "370px";top: string = "200px";ngAfterViewInit() { fromEvent(window, 'resize') .pipe(throttleTime(50), debounceTime(50)) .subscribe((event) => { // 操作 console.log('页面变动了'); //网页可见区域宽： const width = document.documentElement.clientWidth; //网页可见区域高： const height = document.documentElement.clientHeight; if (this.widthInit > width) { this.width = width + "px"; this.left = 0 + "px"; } if (this.heightInit > height) { this.height = height + "px"; } if (height < 600) { this.top = 0 + "px"; } });}1.首先咱们须要通过 DOM 获取 以后 client 的 长度和高度
//网页可见区域宽：const width = document.documentElement.clientWidth;//网页可见区域高：const height = document.documentElement.clientHeight;console.log(width, height);测试：
单位为px;
2.判断
判断当客户端的 width 或者 height 小于临界值时，扭转登录表单的css。
例如，设置 left 属性为0， 高度小于600时设置top属性为0。
当height 小于 临界值时， 把登录表单的高度设置为窗口的高度。
这个临界值能够为登录表单的原始高度或者本人调整。
当然，还能够设置当窗口放大复原时，把登录表单设置为原始数据。
if (this.widthInit > width) { this.width = width + "px"; this.left = 0 + "px"; } if (this.heightInit > height) { this.height = height + "px"; } if (height < 600) { this.top = 0 + "px"; }}效果图：
略微比之前的可观了一些。
2.操作DOM，批改其款式达到成果
动静批改款式的第二种形式:
ts:<div class='old-style' #demo></div>
html:
import { Component, ElementRef, ViewChild, Renderer2 } from '@angular/core';...export class DemoComponent implements OnInit { constructor( private renderer2 : Renderer2) { } @ViewChild('demo') demo: ElementRef; ngOnInit(){ this.renderer2.setAttribute(this.demo.nativeElement, "style","width: 200px;background: #006699;"); }}在我的项目中有时候须要间接操作DOM，然而这样间接拜访 DOM 会导致利用很容易受到攻打。所以并不倡议间接拜访 DOM。
在Angular 拜访DOM 须要应用 Render2 来实现自定义渲染。
Renderer2类 是Angular以服务的模式提供的抽象类，容许操作以后利用的元素，而不必间接拜访最原始的DOM元素。
这里就应用renderer2的 setAttribute办法， 给其的style属性赋值。
这里是批改多个style所以用setAttribute，如果是批改单个style则应用 this.renderer2.setStyle(ele,name,value)
相似的，renderer2也有减少或者删除class的办法
this.renderer2.removeClass(this.demo.nativeElement, "old-style"); this.renderer2.addClass(this.demo.nativeElement, "new-style"); 3.不操作DOM应用 ngClass批改class
ts:
private changeClass : boolean = false;// 想要更改款式时间接更改 changeClass的值。html:
<div [ngClass]="changeClass ? 'new-class' : 'old-class' "></div>当changeClass为false时 div class为old-class 为true时calss为 new-class
除这几个个之外，也有其余办法，但比较复杂和不平安。在这里没有细说。
具体能够查看这篇文章： https://medium.com/swlh/6-way...