根本原因是electron未同步系统缩放因子至chromium渲染层，导致rem基准失准；需通过webcontents.setzoomfactor动态校准，并统一用rem替代px、重置html font-size或采用clamp()响应式根字号。
Electron 渲染进程里 Bootstrap 4 的字体、间距、圆角等用 rem 定义的样式，在高 DPI 屏（如 macOS Retina、Windows 150% 缩放）下会整体放大或错位，根本原因不是 Bootstrap 本身问题，而是 Electron 默认未正确传递系统缩放因子给 Chromium 渲染器。
Electron 启动时未设置合适的 zoomFactor
Electron BrowserWindow 默认 zoomFactor 是 1，但系统缩放（如 Windows 150%）不会自动同步到网页渲染层，导致 rem 基于的尺寸按物理像素计算，视觉上“变小”；而部分 UI 元素（如原生菜单、窗口边框）又按系统缩放渲染，造成比例失调。
- 在创建
BrowserWindow时显式设置：zoomFactor: window.devicePixelRatio（仅适用于简单场景，devicePixelRatio在某些 Electron 版本中不可靠） - 更稳妥做法：启动后调用
webContents.setZoomFactor()，并监听display-metrics-changed事件动态更新 - 避免在 preload.js 中直接读
window.devicePixelRatio—— 渲染进程可能尚未完成 DPI 初始化，值为 1
Bootstrap 4 的 rem 基准被 Electron 错误覆盖
Bootstrap 4 默认设 html { font-size: 16px; }，但 Electron 中若页面加载前触发了缩放（比如用户手动 Ctrl+），或 DevTools 打开过，document.documentElement.style.fontSize 可能被重写，导致所有 rem 计算偏移。
- 强制重置根字号，在 CSS 开头加：
html { font-size: 16px !important; }（注意：仅当没用clamp()或动态 root font-size 时可用） - 若需响应式缩放，改用
html { font-size: clamp(16px, 1.25vw, 20px); }，但必须确保该规则在 Bootstrap CSS 之前加载 - 检查是否有第三方库（如某些 UI 插件）在运行时修改
document.documentElement.style.fontSize，这类操作在 Electron 中副作用更明显
自定义 CSS 中 px 单位与 rem 混用导致比例断裂
你在局部样式里写了 padding: 8px 或 border-radius: 4px，而 Bootstrap 用的是 0.5rem（=8px @16px），表面一样，但 Electron 缩放后 px 不缩、rem 缩——结果按钮内边距变小、圆角变尖锐、文字发虚。
- 全项目禁用
px（除 icon font-size、border等极少数必须固定像素的场景），统一用rem或em - Font Awesome 等图标字体若写死
font-size: 16px，要改成1rem并确认其 CSS 加载顺序在 Bootstrap 之后 - 慎用
transform: scale()临时修复——它会模糊文字、破坏点击热区，且和rem缩放叠加后难以控制
macOS 上 WebKit 渲染线程与主窗口缩放不同步
在 macOS Retina 屏下，Electron 主窗口拉伸由 GPU 层处理，而网页内容由 Blink 渲染，两者缩放策略不一致时，会出现文字边缘锯齿、阴影模糊、box-shadow 偏移等“软性错位”，控制台无报错，但肉眼可辨。
- 在
BrowserWindow创建选项中启用backgroundColor: '#fff'，避免透明背景加剧渲染差异 - 对关键组件（如
.btn,.form-control）加backface-visibility: hidden，减少亚像素渲染抖动 - 禁用硬件加速（
webPreferences: { webgl: false, accelerate: false }）可缓解，但性能代价大，仅作排查手段
真正难调的不是某一行 CSS，而是 Electron 把“系统缩放”“窗口缩放”“网页缩放”“字体渲染 DPI”四层逻辑揉在一起，而 Bootstrap 4 的 rem 体系只默认适配其中一层。动手前先用 chrome://dips（Electron 内置 Chrome 调试页）看当前实际 device pixel ratio 和 zoom factor 是否匹配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
