提起适配的问题，作为前端工作者都有所了解，常见的适配种类有rem，百分比，vw，响应式等。
在上述方法中，能真正能应用于PC端的屈指可数，毕竟PC端不像移动端窗口大小在加载完成后不能够被改变。在PC端如何实现不同分辨率显示器根据设计图尺寸自动缩放？如何实现鼠标拖动浏览器窗口，动态改变整个页面的缩放比例（包括字体大小）？带着这两个问题，将展开我今天的分享。
首先，如何实现不同分辨率显示器根据设计图尺寸自动缩放？
缩放比例=设备宽度/设计尺寸
下面以react为例进行适配：
首先写一个自动缩放的函数，刚加载时候调用（不同分辨率显示器根据设计图尺寸自动缩放），方便拖动窗口调用（鼠标拖动浏览器窗口，动态改变整个页面的缩放比例）。
changeSize() {
const ratio = window.screen.width / 1366;
const dynamicStyle = {
width: '1366px',
transform: `scale(${ratio})`,
transformOrigin: 'left top',
height: `${document.body.offsetHeight / ratio}px`,
};
this.setState({ dynamicStyle});
}
主页面格局如下：
render() {
const { dynamicStyle } = this.state;
return (
<div className="box" style={dynamicStyle}>
<WorkHead />
<WorkContent />
<WorkFoot />
</div>
);
}
在生命周期componentWillMount中调用改变缩放比例的函数
componentWillMount() {
this.changeSize();
}
到此，根据不同分辨率自动根据设计图尺寸去缩放就完成了。
如何实现鼠标拖动浏览器窗口，动态改变整个页面的缩放比例？这个需要用到resize事件。在componentDidMount生命周期中检测resize事件，只要改变窗口的大小就去执行适配函数。
componentDidMount() {
window.addEventListener('resize', () => {
this.changeSize();
});
}
注意别忘了在生命周期结束的时候去掉该事件
componentWillUnmount() {
window.removeEventListener('resize', () => {
this.changeSize();
});
}
到此，在PC端通过百分比适配就完成了。
