React中如何缩放父组件实现所有子组件及间距同比缩放

方案1：直接使用transform: scale（最简便，无需修改子组件） #

你原有的写法本身就已经可以实现子组件尺寸、间距的同步缩放效果：transform: scale() 是作用于整个容器的渲染层，内部所有子元素的尺寸、间距、边框、文字等所有视觉属性都会自动等比例缩放，不需要对子组件做任何调整。
如果出现缩放后位置偏移不符合预期的问题，调整transform-origin属性修改缩放原点即可，比如从左上角开始缩放的写法：

<Parent style={{
  transform: "scale(2)",
  transformOrigin: "top left" // 默认为center中心缩放，可根据需求调整
}}>
  <Child_1 />
  <Child_2 />
  <Child_3 />
  <Child_4 />
</Parent>

注意：该方案的transform属性不会改变元素在正常文档流中的占位大小，父元素缩放前后占用的页面布局空间不变，可能会和周围元素出现重叠或留白，如果你的场景不需要考虑父元素的文档流占位影响，优先选这个方案。

方案2：相对单位绑定缩放比例（适配需要文档流占位同步缩放的场景） #

如果需要父元素缩放后占用的页面布局空间也同步变化，可以用以下两种更简便的实现：

• 方案2-1：em单位实现
  如果所有子组件的尺寸、间距都用em作为单位，只需要修改父元素的font-size即可实现整体同步缩放：

// 默认1em=16px，缩放2倍则父元素font-size设为32px
<Parent style={{ fontSize: '32px' }}>
  <Child_1 />
  <Child_2 />
  <Child_3 />
  <Child_4 />
</Parent>

• 方案2-2：CSS变量实现
  如果子组件用的是px固定单位，给父元素绑定CSS变量作为缩放系数，所有尺寸属性乘以该变量即可：

const scale = 2;
<Parent style={{ '--scale': scale } as React.CSSProperties}>
  <Child_1 />
  <Child_2 />
  <Child_3 />
  <Child_4 />
</Parent>

配套CSS写法示例：

/* 父组件及内部所有子元素的尺寸、间距都乘以缩放系数 */
.Parent, .Parent * {
  width: calc(100px * var(--scale));
  margin: calc(8px * var(--scale));
  padding: calc(8px * var(--scale));
  font-size: calc(14px * var(--scale));
}

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture