如何通过CSS属性实现网页元素随窗口尺寸自适应缩放？

你提到的white-space: nowrap仅用于控制文本不换行，height: 90vh只是设置元素高度占视口的90%，这两个属性都无法实现元素随窗口尺寸同步缩放、保持布局不溢出的效果。以下是几种可行的CSS方案：

方法1：通过transform: scale()实现整体等比缩放 #

这种方式以设计稿尺寸为基准，计算当前视口与设计稿的比例，对容器进行整体缩放，确保所有元素同步适配窗口：

/* 假设设计稿的基准尺寸为宽1200px、高800px */
.page-container {
  --scale-ratio: calc(min(100vw / 1200, 100vh / 800));
  transform: scale(var(--scale-ratio));
  transform-origin: top left; /* 以左上角为缩放原点，避免偏移 */
  width: 1200px;
  height: 800px;
  /* 可选：让容器垂直居中 */
  position: relative;
  top: 50%;
  transform: scale(var(--scale-ratio)) translateY(-50%);
  margin: 0 auto;
}

原理：用min()函数取视口宽/设计稿宽、视口高/设计稿高中的较小值作为缩放比例，保证容器始终能完整显示在视口中，内部所有元素会跟着容器同步缩放。

方法2：全量使用视口单位（vw/vh）定义尺寸 #

将所有元素的宽度、高度、字体大小、内外边距等都用vw（或vh）作为单位，直接让元素尺寸随视口变化：

/* 示例：设计稿宽1200px，1vw = 12px */
.title {
  font-size: 5vw; /* 对应设计稿60px */
  width: 80vw; /* 对应设计稿960px */
  padding: 2vw; /* 对应设计稿24px */
}

优点：无需额外缩放逻辑，纯CSS原生支持；缺点：需要统一换算单位，复杂布局的维护成本较高。

方法3：CSS容器查询（精细控制局部缩放） #

如果需要针对某个容器内的元素做自适应缩放，可以使用容器查询，让元素根据父容器的尺寸调整样式：

/* 先定义容器的查询类型 */
.parent-container {
  container-type: size; /* 启用尺寸容器查询 */
}

/* 当父容器宽度小于800px时，调整子元素样式 */
@container (max-width: 800px) {
  .child-card {
    font-size: 0.8em;
    padding: 0.5rem;
    width: 100%;
  }
}

若将根容器设置为视口大小，也能实现类似全局缩放的效果，适合需要局部差异化适配的场景。

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