大屏适配

大屏最重要的一件事,是不同屏幕的适配.

常见设计稿 1920:1080 16:9

1. 自适应方案 1 兼容 IE8 以上 vw:100vw vh:100vh 直接设置成最大的

vw vh 无法解决 文字出界的问题文字大小 不随着变化. 所有不推荐

2. 使用 transform scale 缩放

从盒子的几何中心开发放大缩放需要从屏幕的设备中心点.

.box {
  position: fixed;
  width: 1920px;
  height: 1080px;
  transform-origin: left top;
  left: 50%;
  top: 50%;
}

let box = document.querySelector(".box");

box.style.transform = `scale(${getScale()}) translate(-50%,-50%)`;

function getScale(w = 1920, h = 1080) {
  const ww = window.innerWidth / w;
  const hh = window.innerHeight / h;
  return Math.min(ww, hh);
}

window.onresize = () => {
  box.style.transform = `scale(${getScale()}) translate(-50%,-50%)`;
};