0.000757rem 的 bug 引发响应式设计革命

Responsive Design Calculator

几周前，我发现网站字体大小偶尔变成了 1.24924375rem 而不是预期的 1.25rem。虽然没人会注意到这微小的差异，但我还是被激怒了，决定深究原因。我的网站很老，最初是为 640x480 或 800x600 的桌面显示器设计的，内容宽度固定为 450px。随着分辨率变化，我后来调整为 600px，但从未真正考虑过手机和平板的响应式布局。我决定研究其他网站如何处理不同屏幕尺寸，发现常用“断点”切换布局。我不想维护多个布局，而是希望有一个能根据浏览器宽度平滑适应的单一布局。2017 年，我逐步迁移页面；2020 年，我改用 rem 单位以适配用户首选字体大小，却因手动计算失误引入了微小误差。最终，我开发了一个交互式计算器，自动根据断点生成 CSS，并将计算逻辑移至 CSS 内部，利用 clamp() 和 round() 函数实现精准布局。

"修复这个 bug 只改变了几分之一像素，这对任何人都无关紧要，但项目的后半部分却可能非常有价值。"