如果设计稿尺寸与实际屏幕分辨率比例相同,则可以满屏呈现。
import React, { PureComponent } from 'react';
import {
Row, Col,
} from 'antd';
import debounce from 'lodash.debounce';
import styles from './style.less';
const getScale = () => {
const width = 1920, height = 1080; // 此处可以根据实际设计稿尺寸修改
let ww = window.innerWidth / width;
let wh = window.innerHeight / height;
return ww < wh ? ww : wh;
}
class Comp extends PureComponent {
state = {
scale: getScale(),
}
setScale = debounce(() => { // debounce节流
// 获取到缩放比,设置它
let scale = getScale();
this.setState({ scale });
}, 500)
componentDidMount() {
window.addEventListener('resize', this.setScale); // 得到呈现的屏幕宽高比
}
componentWillUnmount() {
window.removeEventListener('resize', this.setScale);
}
render() {
const width = 1920, height = 1080;
// 固定好16:9的宽高比,计算出最合适的缩放比,宽高比可根据需要自行更改
const { scale } = this.state;
return (
<div
className={styles['box']}
style={
{
transform: `scale(${scale}) translate(-50%, -50%)`,
WebkitTransform: `scale(${scale}) translate(-50%, -50%)`,
width,
height
}}
>
......
</div>
}
style.less中的样式:
.box{
transform-origin: 0 0;
position: absolute;
left: 50%;
top: 50%;
transition: 0.3s;
}