在h5开发中如何适配 750px的设计稿

在 H5 开发中，适配 750px 的设计稿是一个常见的场景，特别是在移动端开发中。这种设计稿通常为高分辨率屏幕（如 Retina 屏）设计，设计稿的宽度为 750px，但我们需要针对不同设备进行适配，尤其是屏幕宽度为 375px 的设备。

解决方案：使用 `rem` + 动态根字体大小 (Flexible / vw 适配方案)

这种方案通过动态设置根元素的 font-size，然后使用 rem 单位来定义页面的布局和尺寸。实现效果是：不同设备屏幕宽度的 rem 值不一样，保证元素能够根据屏幕宽度自适应缩放。

步骤1：计算 `rem` 单位

假设我们以 750px 设计稿 为基础，那么页面的宽度在设备上需要自动适配。我们可以采用动态设置根元素的 font-size，通过计算比例将 750px 的宽度适配到设备屏幕宽度。

为了方便计算，我们可以让 1 rem = 设计稿宽度的1/10，即 1 rem = 75px。这样所有的元素尺寸都可以通过 rem 单位来计算。

步骤2：通过 JavaScript 动态设置 `html` 根元素的 `font-size`

可以通过 JavaScript 在页面加载时计算设备屏幕的宽度，并动态设置 html 的 font-size。

// JavaScript 动态计算 rem 基准值
(function () {
  function setRem() {
    // 获取设备的宽度
    const html = document.documentElement;
    const width = html.clientWidth;

    // 设置 rem 基准值，假设设计稿宽度是 750px
    const baseWidth = 750;
    
    // 设定1rem的值，使得在宽度为750px的设备上1rem等于75px
    const fontSize = (width / baseWidth) * 100; // 这里100是方便后续写样式时按比例换算
    html.style.fontSize = fontSize + 'px';
  }

  // 初始化设置
  setRem();

  // 当窗口大小变化时重新计算
  window.addEventListener('resize', setRem);
})();

在这个方案中，html.style.fontSize 是动态设置的根字体大小，它会根据屏幕的宽度进行调整。例如：

当屏幕宽度为 375px 时，fontSize = (375 / 750) * 100 = 50px，1rem 等于 50px。
当屏幕宽度为 750px 时，fontSize = (750 / 750) * 100 = 100px，1rem 等于 100px。

步骤3：设计稿中的尺寸如何换算成 `rem`

现在你需要将设计稿中的 px 值转换为 rem。你可以使用下面的公式：

设计稿中的 px 值 ÷ 100 = rem 值

例如：

一个宽度为 150px 的元素，150px ÷ 100 = 1.5rem
一个字体大小为 32px 的文本，32px ÷ 100 = 0.32rem

在 CSS 中，你可以使用 rem 来定义布局和尺寸：

/* 设置页面整体样式 */
.container {
  width: 7.5rem; /* 750px 宽度 */
  padding: 0.2rem; /* 20px 的内边距 */
}

/* 设置一个按钮的样式 */
.button {
  width: 2.4rem; /* 240px 宽度 */
  height: 1rem;  /* 100px 高度 */
  font-size: 0.3rem; /* 30px 字体大小 */
  border-radius: 0.2rem; /* 20px 圆角 */
}

步骤4：媒体查询优化

尽管 rem 单位的适配方案已经相对灵活，但在某些情况下（比如平板或非常小的屏幕设备），你可能还需要使用媒体查询进行进一步的调整。

@media (max-width: 320px) {
  .container {
    width: 6.4rem; /* 针对更小的屏幕适配 */
  }
}

步骤5：使用 CSS 预处理器（可选）

如果你的项目使用了 CSS 预处理器（如 SASS 或 LESS），可以通过定义一个转换函数来更方便地处理设计稿中的 px 转换。

例如，使用 LESS：

@base: 100;

.px2rem(@px) {
  @px / @base * 1rem;
}

.container {
  width: px2rem(750);
  padding: px2rem(20);
}

.button {
  width: px2rem(240);
  height: px2rem(100);
  font-size: px2rem(30);
}

通过这种方式，你可以在开发中继续使用设计稿中的 px，预处理器会自动将它们转换为 rem，从而简化开发过程。

步骤6：适配图像和其他元素

对于图片和其他非文字元素，可以使用 max-width 或相对单位来控制它们的大小：

img {
  max-width: 100%; /* 图片在容器内自适应宽度 */
  height: auto;
}

总结

设计稿为 750px，使用 rem 单位进行布局。
使用 JavaScript 动态设置 html 元素的 font-size，使其根据设备宽度变化，保证自适应效果。
所有设计稿中的尺寸按 px ÷ 100 转换为 rem，在 CSS 中进行布局。
使用 max-width 等方法处理图片和其他固定尺寸元素，确保它们在不同设备上良好显示。