2022年3月21日
看到以前的同事做了一个自适应的大屏,思考许久,尝试把自适应的代码写出来了。
debugger;
const width = 1920;
const height = 1080;
const targetRate = parseFloat((width/height).toFixed(5))
const currentWidth = window.innerWidth
const currentHeight = window.innerHeight
const currentScreenRate = parseFloat((currentWidth/currentHeight).toFixed(5));
let xRate,yRate
if(currentScreenRate > targetRate) {
xRate = (currentHeight * targetRate / width).toFixed(5);
yRate = (currentHeight / height).toFixed(5);
}else {
xRate = (currentWidth / width).toFiexd(5);
yRate = (currentWidth / taregtRate / height).toFixed(5);
}
const transformStyle = `scale(${xRate},${yRate}) translate(-50%, -50%)`;
// 一行代码的简写,声明变量可以通过reduce来传递,有几层变量就嵌套基层reduce。也得到了上面transformStyle的结果
Array(1).fill(0).reduce((_) => Array(1).fill(0).reduce(__ => (__.currentScreenRate > __.targetRate ? (_.xRate = (_.currentHeight * __.targetRate / _.width).toFixed(5),_.yRate = (_.currentHeight / _.height).toFixed(5)):(_.xRate = (_.currentWidth / _.width).toFiexd(5),_.yRate = (_.currentWidth / __.taregtRate / _.height).toFixed(5)),`scale(${_.xRate},${_.yRate}) translate(-50%, -50%)`), Object({targetRate: parseFloat((_.width/_.height).toFixed(5)), currentScreenRate: parseFloat((_.currentWidth/_.currentHeight).toFixed(5))})), Object({width: 1920, height: 1080, currentWidth: window.innerWidth, currentHeight: window.innerHeight, xRate: void 0, yRate: void 0}))
上次更新时间: 10年18月2023日 01时57分53秒