原理:
屏幕要么宽度超出,要么高度超出,通过计算得出是那个超出,按照超出那个计算缩放比例,进行缩放。
但是不知道为什么100%的时候宽度高度都填充不满!!!??
mounted 和函数setLayout写法:
setLayout() {
let designWidth = 1746; //设计稿的宽度,根据实际项目调整
let designHeight = 950; //设计稿的高度,根据实际项目调整
// 自适应分两种情况 1、宽度不够 2、高度不够
let ratio =
document.documentElement.clientWidth /
document.documentElement.clientHeight <
designWidth / designHeight;
let scale = ratio
? document.documentElement.clientHeight / designHeight
: document.documentElement.clientWidth / designWidth;
console.log(document.documentElement.clientHeight);
let a =
scale > 1
? 1
: (document.querySelector(
"#iocp"
).style.transform = `scale(${scale})`);
// 设置缩放中心为上边中间
document.querySelector("#iocp").style.transformOrigin = `top center`;
console.log(
scale,
"scale",
document.documentElement.clientHeight / designHeight
);
}
},
mounted() {
this.setLayout();
window.onresize = function() {
let designWidth = 1746; //设计稿的宽度,根据实际项目调整
let designHeight = 950; //设计稿的高度,根据实际项目调整
// 自适应分两种情况 1、宽度不够 2、高度不够
let ratio =
document.documentElement.clientWidth /
document.documentElement.clientHeight <
designWidth / designHeight;
let scale = ratio
?document.documentElement.clientWidth / designWidth
:document.documentElement.clientHeight / designHeight;
let a =
scale > 1
? 1
: (document.querySelector(
"#iocp"
).style.transform = `scale(${scale})`);
// 设置缩放中心为上边中间
document.querySelector("#iocp").style.transformOrigin = `top center`;
console.log("+++ratio,scale+++", ratio, scale);
console.log(
"--height--",
document.documentElement.clientHeight,
designHeight
);
console.log(
"--width--",
document.documentElement.clientWidth,
designWidth
);
};
根据项目优化
如下是mounted中代码部分,setLayoput中的部分修改为同样的内容
与上面的区别是
window.onresize = function() {
let designWidth = 1920; //设计稿的宽度,根据实际项目调整
let designHeight = 1080; //设计稿的高度,根据实际项目调整
// 自适应分两种情况 1、宽度不够 2、高度不够
// true说明宽度不够,false说明高度不够
let ratio = document.documentElement.clientHeight > designHeight;
//本项目的宽度通过百分比已经能适配了,所以本次缩放只考虑高度上
// 如果高度小于设计稿的高度进行缩放,如果高度大于设计稿的高度不缩放,缩放比例设置为1,因为1是显示不变形的最好高度
let scale = ratio
? 1
: document.documentElement.clientHeight / designHeight;
console.log(
"scale",
ratio,
scale,
document.documentElement.clientWidth,
document.documentElement.clientHeight
);
document.querySelector("#iocp").style.transform = `scaleY(${scale})`;
// 设置缩放中心为上边中间
document.querySelector("#iocp").style.transformOrigin = `top center`;
};