使用JavaScript / JQuery在页面加载时将相对/视口大小转换为固定大小
希望你过得愉快。 我目前正在开发一个网站，其中几乎所有的测量（字体大小，填充，边距，宽度，高度等）都是使用视口单元vw和vh制作的。
我使用这些单位是因为它们是最好的，使页面看起来像我想要的不同的屏幕分辨率，不像像素大小。
我想知道是否可能，是在页面加载后，得到所有这些测量的非相对值（例如，如果我说1vw，我的屏幕是1000px，非相对值应该是10px）和用那些替换我的css3表上的相对值。 这可能听起来很荒谬，但我的观点是允许用户放大和缩小页面，并实际放大或缩小。 目前，无论用户做什么样的缩放，页面都保持不变，除了我有的重复图像。
我想在javascript中这样做，因为我的语言是我最熟悉的html中的客户端脚本，因为我的java起源。
或者，也许有一个我不知道的function，只是在放大时忽略相对值？ 如果是的话，请告诉我。
这将是这样的（在Chrome和IE中测试）; 它适应页面加载和重新加载时的视口，但不适应后续视口resize和缩放。
Viewport Units
Converted to Pixel Values
Probably the best way to do this for fonts,
is to set the font sizes as percentages,
and then have javascript change the BODY font size.
只是为了解释发生了什么：这会检查当前视口大小，然后遍历所有样式表，查找以视口单位设置值的属性，将值转换为像素，并将转换后的css规则添加到新的样式表中，即附加在其他样式表之后。
当然，如果只需要更新几种样式，您可以将它们放在一个单独的样式表中，并让脚本只查看它们。 或者您甚至可以逐字添加样式，例如：
addStyle(document.styleSheets[0], "H1", "font-size: " + w * 0.04 + "px"); addStyle(document.styleSheets[0], "P", "font-size: " + w * 0.02 + "px");
另外，不要在媒体查询中设置任何大小; 这会在resize和缩放时改变布局。