如何在@media(max-width:734px)下让电子简历容器内元素自动适配缩放

方法1：CSS transform: scale 整体缩放（最贴合Word移动端效果） #

这种方法直接将简历容器按比例缩放至屏幕宽度，内容会跟着容器一起缩放，完全匹配Word移动端把文档铺满屏幕的显示逻辑。

1. 先在全局定义简历的原始设计尺寸和比例：

:root {
  --resume-design-width: 734px; /* 你的设计稿宽度，即媒体查询断点 */
  --ratio: 1.414; /* 替换成你实际的宽高比 */
  --resume-design-height: calc(var(--resume-design-width) * var(--ratio));
}

.resume__container {
  width: var(--resume-design-width);
  height: var(--resume-design-height);
  /* 其他基础样式，比如背景、内边距等 */
}

2. 在移动端媒体查询中设置缩放逻辑：

@media screen and (max-width: 734px) {
  .resume__container {
    /* 保持原始设计尺寸，通过缩放适配屏幕 */
    width: var(--resume-design-width);
    height: var(--resume-design-height);
    /* 从左上角开始缩放，避免偏移 */
    transform-origin: top left;
    /* 计算缩放比例：屏幕宽度 / 设计稿宽度 */
    transform: translate(-50%, 0) scale(calc(100vw / var(--resume-design-width)));
    position: relative;
    left: 50%;
    /* 隐藏可能出现的横向滚动条 */
    overflow: hidden;
  }
}

优点：无需修改内容的单位，直接复用原有设计的尺寸，1:1还原比例，效果和Word移动端完全一致；缺点：缩放后内容像素会被拉伸/压缩，高DPI屏幕下可能轻微模糊，但移动端基本可忽略。

方法2：rem单位全局适配（无缩放的原生适配） #

如果希望内容是原生适配而非缩放，可通过修改根字体大小，让所有基于rem的元素自动适配屏幕宽度。

1. 全局定义基础变量：

:root {
  --base-font-size: 16px; /* 桌面端基础字体大小 */
  --resume-design-width: 734px;
  --ratio: 1.414;
}

/* 所有内容的单位都用rem，示例：
.resume__title {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
*/

2. 移动端媒体查询中调整根字体大小：

@media screen and (max-width: 734px) {
  :root {
    /* 按屏幕宽度与设计稿的比例，动态调整根字体大小 */
    font-size: calc((100vw / var(--resume-design-width)) * var(--base-font-size));
  }
  .resume__container {
    width: 100vw;
    height: calc(100vw * var(--ratio));
  }
}

优点：内容是原生适配，文字清晰无模糊；缺点：需要将所有固定像素单位（px）替换为rem，适合新项目或重构场景。

方法3：JS动态监听窗口缩放（适配屏幕旋转等场景） #

如果需要实时响应窗口尺寸变化（比如手机旋转屏幕），可结合JS动态计算缩放比例：

<!-- 确保viewport元标签正确设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

const resumeContainer = document.querySelector('.resume__container');
const resumeDesignWidth = 734;

function resizeResume() {
  const scale = window.innerWidth / resumeDesignWidth;
  resumeContainer.style.transformOrigin = 'top left';
  resumeContainer.style.transform = `translate(-50%, 0) scale(${scale})`;
  resumeContainer.style.position = 'relative';
  resumeContainer.style.left = '50%';
}

// 初始化执行一次
resizeResume();
// 监听窗口大小变化
window.addEventListener('resize', resizeResume);

优点：实时适配窗口变化，处理屏幕旋转等场景；缺点：依赖JS，需确保DOM加载完成后执行。

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