如何通过CSS实现根据窗口宽度动态缩放div的效果？

你要的整体等比缩放、不调整内部元素布局的效果，两种实现方式如下：

方案1：纯CSS实现 #

CSS的scale()参数支持无单位的比例值，我们可以通过calc()动态计算视口和基准尺寸的比例，不需要写固定值：

/* 外层div，假设你原始设计的固定宽高为1920px*1080px，可自行修改 */
.scale-container {
  width: 1920px;
  height: 1080px;
  /* 设置缩放原点为左上角，避免缩放后位置偏移，也可根据需求设为center */
  transform-origin: top left;
  /* 100vw为当前视口宽度，除以基准宽度得到动态缩放比例 */
  transform: scale(calc(100vw / 1920));
  overflow: hidden;
}

如果需要同时适配宽高避免溢出，可以结合媒体查询分别判断宽高比例，设置对应缩放值。 #

方案2：JS动态计算（适配性更优） #

如果需要更灵活的适配，不需要写多套媒体查询，推荐用JS实时计算缩放比例：

// 基准设计尺寸，替换为你的div原始宽高
const BASE_WIDTH = 1920
const BASE_HEIGHT = 1080
const container = document.querySelector('.scale-container')

function updateScale() {
  // 分别计算宽高的缩放比例，取较小值保证整个容器可以完全展示在视口中
  const widthScale = window.innerWidth / BASE_WIDTH
  const heightScale = window.innerHeight / BASE_HEIGHT
  const finalScale = Math.min(widthScale, heightScale)
  container.style.transform = `scale(${finalScale})`
}

// 页面加载时初始化
updateScale()
// 窗口尺寸变化时更新缩放比例
window.addEventListener('resize', updateScale)

注意事项 #

• 缩放后的元素在文档流中的占位还是原始尺寸，如果你不想要多余的滚动条，可以给容器的父元素加上overflow: hidden，或者在JS里同步修改父元素的宽高为缩放后的数值。
• 如果你需要容器居中展示，可以把transform-origin设为center，再配合绝对定位居中的样式实现。

内容的提问来源于stack exchange，提问作者Yaya