前端 - rem适配生产环境不生效？

Question

背景：
vue3+vite项目。

rem配置相关代码

// rem设置
function setRem() {
  const designSize = 1920; // 设计图尺寸-测试jenkin分支部署

  const html = document.documentElement;

  const wW = html.clientWidth; // 窗口宽度
  const rem = (wW * 100) / designSize;

  document.documentElement.style.fontSize = rem + 'px';
}
window.addEventListener('load', setRem);

使用rem时，本地开发环境测试正常,部署到生产环境，界面错乱，应该如何修复呀？

Answer 1

load 改成 DOMContentLoaded 试试

Answer 2

可能的问题和解决方案

问题 1: 加载时机问题

在你的代码中，setRem 函数只在 window 的 load 事件触发时执行一次。然而，如果生产环境的页面在加载后发生了尺寸变化（例如，由于用户改变了浏览器窗口大小或者页面布局在加载后发生了动态变化），那么 rem 值可能不会自动更新。

解决方案 1: 监听窗口大小变化

在 setRem 函数之外，添加对 resize 事件的监听，并在事件触发时重新计算 rem 值。

window.addEventListener('resize', setRem);

但是，请注意，频繁地改变 html 的 fontSize 可能会导致页面重排和重绘，这可能会影响性能。因此，你可以考虑使用防抖（debounce）或节流（throttle）函数来限制 resize 事件的触发频率。

问题 2: 初始设置时机问题

在某些情况下，load 事件可能不是最佳的时机来设置 rem 值，尤其是在生产环境中，可能有更多的资源需要加载。

解决方案 2: 监听 DOMContentLoaded

尝试在 DOMContentLoaded 事件触发时设置 rem 值，而不是在 load 事件触发时。DOMContentLoaded 事件会在 DOM 完全加载和解析完成后触发，而不必等待样式表、图片和子框架完成加载。

document.addEventListener('DOMContentLoaded', setRem);

但是，如果你需要确保图片等所有资源都加载完成后再设置 rem 值，那么 load 事件仍然是必要的。

问题 3: 缓存或部署问题

在生产环境中，可能会存在缓存或部署问题，导致你的 setRem 函数没有被正确执行或更新。

解决方案 3: 清除缓存或重新部署

确保在生产环境中清除了缓存，并重新部署了你的应用。此外，检查你的构建和部署流程，确保没有错误或遗漏。

问题 4: CSS单位冲突

确保你的 CSS 中没有同时使用 px 和 rem 单位，并且这些单位之间的转换是正确的。如果同时使用这两种单位，可能会导致布局问题。

解决方案 4: 统一使用 rem 单位

尽量在你的 CSS 中统一使用 rem 单位，而不是混合使用 px 和 rem。这样，你就可以更容易地控制页面的布局和缩放。

总结

检查你的 setRem 函数的加载时机、事件监听和 CSS 单位使用，确保它们在生产环境中能够正常工作。同时，确保你的构建和部署流程没有错误或遗漏。如果以上方法都不能解决问题，你可能需要进一步检查你的代码和生产环境的具体配置。