同一组件如何实现多尺寸展示？rem改em之外有没有更优方案？

• 方案1：使用CSS transform: scale() 直接缩放（最快实现，零原有代码改动） #

  这是成本最低的方案，完全不需要修改原有rem单位的尺寸定义，只需要给logo容器加对应样式即可：

  /* 角落的小尺寸logo容器 */
  .site-logo {
    width: 80px; /* 按需调整为你需要的logo实际占位尺寸 */
    height: 60px;
    overflow: hidden;
    position: relative;
  }
  /* 复用的原有欢迎页图文组件 */
  .site-logo .welcome-banner {
    /* 按比例缩放，0.2即缩放到原尺寸的20%，按需调整数值即可 */
    transform: scale(0.2);
    /* 从左上角开始缩放，避免内容偏移出容器 */
    transform-origin: top left;
    /* 原有所有rem定义的样式完全保留，不需要修改 */
  }
  

  优势：不需要调整原有组件的任何尺寸代码，短时间即可上线。注意transform缩放不会改变元素实际占位，所以外层容器固定尺寸加overflow: hidden即可解决布局偏移问题。

• 方案2：使用CSS容器查询单位（一劳永逸，多场景复用最优） #

  如果你后续还需要在更多不同尺寸的容器中复用这个图文组件，推荐把原有rem单位替换为容器查询单位（cqw/cqh，分别代表容器宽度百分比、容器高度百分比）：

  /* 给所有需要放置该图文组件的容器开启容器查询 */
  .welcome-banner-container, .site-logo {
    container-type: size;
  }
  /* 组件内的元素尺寸全部用容器查询单位定义 */
  .banner-img {
    width: 70cqw; /* 占容器宽度的70% */
  }
  .banner-text {
    font-size: 5cqh; /* 字高占容器高度的5% */
  }
  

  优势：只需要写一套组件样式，不管是放在整宽的欢迎页，还是小尺寸的logo角落，甚至是其他中等尺寸的卡片位，都会自动按比例适配容器尺寸，比em更灵活，不需要额外调整父元素font-size。

• 方案3：导出为单个SVG文件（维护成本最低，性能最优） #

  如果这个图文组合的内容不会频繁修改，可以直接把图文导出为单个矢量SVG文件，直接作为图片插入到logo位置即可，矢量格式任意缩放都不会模糊，也不需要携带原有组件的HTML和CSS代码，页面加载性能更好。

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