如何有效地将像素转换为视口单位？

问：

我一直在构建一个渐进式 Web 应用程序。为了设计它的布局，我（错误地）使用了 720px 的视口元宽度，因为它在我的手机上看起来不错。

为了使其在任何设备上都能正常工作，我将宽度更改为“设备宽度”，并且我正在尝试从使用像素作为元素高度/宽度/边距/填充/边框，...等等，使用视口单位。

我是手动执行此操作的，而且效率不高。到目前为止，我尝试通过计算元素在设备分辨率上的百分比来转换元素的大小值，但这会因边距、填充、边框而变得复杂......

有没有办法查看整个 HTML 页面的框模型（见下文）？

或者有没有一种更干净、更少手动的从 px 转换为 vw，vh 的方法？

我见过一些类似的问题，但似乎都集中在特定元素上，而不是整个页面。