大屏适配(1920*1080)
public ngAfterViewInit(): void {
this.autoFitScreen();
window.addEventListener('resize', this.autoFitScreen);// 此处this指向window
}
public ngOnDestroy(): void {
window.removeEventListener('resize', this.autoFitScreen);
}
// 小屏适配
public autoFitScreen() {
const minWidth = 1280;
const maxWidth = 1920;
const offsetWidth = document.body.offsetWidth;
const dom: HTMLDivElement = document.querySelector('.app-pandect');
if (dom && offsetWidth <= maxWidth && offsetWidth >= minWidth) {
// debugger
const scale = offsetWidth / maxWidth;
dom.style.transform = `scale(${scale}) translateX(${scale === 1 ? '0px' : '16px'})`;
dom.style.marginBottom = `-${(1 - scale) * 1013}px`;
dom.style.transformOrigin = `0px 0`;
} else if (dom && offsetWidth < minWidth) {
dom.style.transform = `scale(1)`;
dom.style.marginBottom = `0px`;
dom.style.transformOrigin = `0px 0`;
}
}
// 也可以使用rxjs进行操作
fromEvent(window, 'resize')
.pipe(debounceTime(100))
.subscribe(() => {
// .....同上
})