提起適配的問題，作為前端工作者都有所了解奖蔓，常見的適配種類有rem赞草，百分比，vw吆鹤，響應式等厨疙。
在上述方法中，能真正能應用于PC端的屈指可數(shù)疑务，畢竟PC端不像移動端窗口大小在加載完成后不能夠被改變沾凄。在PC端如何實現(xiàn)不同分辨率顯示器根據(jù)設計圖尺寸自動縮放梗醇？如何實現(xiàn)鼠標拖動瀏覽器窗口，動態(tài)改變整個頁面的縮放比例（包括字體大腥鲶啊）叙谨？帶著這兩個問題，將展開我今天的分享保屯。
首先手负，如何實現(xiàn)不同分辨率顯示器根據(jù)設計圖尺寸自動縮放？
縮放比例=設備寬度/設計尺寸
下面以react為例進行適配：
首先寫一個自動縮放的函數(shù)姑尺，剛加載時候調用（不同分辨率顯示器根據(jù)設計圖尺寸自動縮放）竟终，方便拖動窗口調用（鼠標拖動瀏覽器窗口，動態(tài)改變整個頁面的縮放比例）切蟋。
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中調用改變縮放比例的函數(shù)
componentWillMount() {
this.changeSize();
}
到此统捶，根據(jù)不同分辨率自動根據(jù)設計圖尺寸去縮放就完成了。
如何實現(xiàn)鼠標拖動瀏覽器窗口敦姻，動態(tài)改變整個頁面的縮放比例瘾境？這個需要用到resize事件。在componentDidMount生命周期中檢測resize事件镰惦，只要改變窗口的大小就去執(zhí)行適配函數(shù)迷守。
componentDidMount() {
window.addEventListener('resize', () => {
this.changeSize();
});
}
注意別忘了在生命周期結束的時候去掉該事件
componentWillUnmount() {
window.removeEventListener('resize', () => {
this.changeSize();
});
}
到此，在PC端通過百分比適配就完成了旺入。
