实现代码
React
/*
JS部分
*/
//数据大屏自适应函数
const handleScreenAuto = () => {
const designDraftWidth = 1920; //设计稿的宽度
const designDraftHeight = 960; //设计稿的高度
//根据屏幕的变化适配的比例
const scale =
document.documentElement.clientWidth / document.documentElement.clientHeight < designDraftWidth / designDraftHeight
? document.documentElement.clientWidth / designDraftWidth
: document.documentElement.clientHeight / designDraftHeight;
//缩放比例
(document.querySelector("#screen") as any).style.transform = `scale(${scale}) translate(-50%)`;
};
//React的生命周期 如果你是vue可以放到mountd或created中
useEffect(() => {
//初始化自适应 ----在刚显示的时候就开始适配一次
handleScreenAuto();
//绑定自适应函数 ---防止浏览器栏变化后不再适配
window.onresize = () => handleScreenAuto();
//退出大屏后自适应消失 ---这是react的组件销毁生命周期,如果你是vue则写在deleted中。最好在退出大屏的时候接触自适应
return () => (window.onresize = null);
}, []);
/*
HTML部分
*/
<div className="screen-wrapper">
<div className="screen" id="screen"></div>
</div>;
/*
CSS部分 --除了设计稿的宽高是根据您自己的设计稿决定以外,其他复制粘贴就完事
*/
.screen-root {
height: 100%;
width: 100%;
.screen {
display: inline-block;
width: 1920px; //设计稿的宽度
height: 960px; //设计稿的高度
transform-origin: 0 0;
position: absolute;
left: 50%;
}
}
原理
designDraftWidth / designDraftHeight;这两个属性,叫做:设计稿宽高。顾名思义:就是设计师给我们出的那个设计稿是按照什么宽高比例出的设计图。换言之,我们制作视图的时候,得有个固定的宽高值。
参考
支持设置高度/宽度缩放
this.scale = () => {
if (this.props.type === "width") {
const width = window.innerWidth;
this.setState({
scale: this.props.width ? (width / this.props.width) : 3840,
});
}
else {
const height = window.innerHeight;
this.setState({
scale: this.props.height ? (height / this.props.height) : 2160,
});
}
};
style: { transform: `translate(-50%, -50%) scale(${this.state.scale})` }