使用javascript进行所有div大小调整，以克服浏览器对vh、vm和css计算的支持
目标：网站，适合任何屏幕大小和方向流畅无滚动。在SassMeister中，我用不同的媒体查询布局解决了包装部分这一荒谬的数学问题： 我唯一能做的就是使用基于vh和vw的calc来确定所有div的大小。计算单位和视口单位都是safari 5、Opera mini和IE8的问题 如果无法访问vh、vw、calc，任何polyfill都将无法在没有滚动条的情况下精确安装屏幕 所以。。。我是新手，不会扔西红柿，但是使用javascript来： 1在加载时检索vh和vw值，并调整此零件的大小，我知道可以使用viewport、verge等进行调整 2用相同的内部javascript替换所有css calc函数 3将结果div大小输出到样式表 非常感谢您的帮助，但我意识到这意味着javascript将负责整个布局，这是不可取的。我就是不知道还能怎么做。如果有一个坚实的实际原因，这个概念是注定的，或者另一种方法，我也想知道使用javascript进行所有div大小调整，以克服浏览器对vh、vm和css计算的支持,javascript,jquery,css,fluid-layout,viewport-units,Javascript,Jquery,Css,Fluid Layout,Viewport Units,目标：网站，适合任何屏幕大小和方向流畅无滚动。在SassMeister中，我用不同的媒体查询布局解决了包装部分这一荒谬的数学问题： 我唯一能做的就是使用基于vh和vw的calc来确定所有div的大小。计算单位和视口单位都是safari 5、Opera mini和IE8的问题 如果无法访问vh、vw、calc，任何polyfill都将无法在没有滚动条的情况下精确安装屏幕 所以。。。我是新手，不会扔西红柿，但是使用javascript来： 1在加载时检索vh和vw值，并调整此零件的大小，我知道可以使
谢谢。我可以回答关于javascript取代vw和vh的部分。在我的代码中，它们不起作用，所以我不得不想出一个新的替代方案。这是： 首先，我为body标签设置了一个onload函数
<body onload="screenSize()">
yourElement.style.fontSize=yourVwAmount+"vw"
你的“目标”或多或少是你在这里的主要问题。习惯于这样一种想法，即一个网站在所有可能的屏幕尺寸上看起来都不一样——而且它也不必如此。即使在非常小的屏幕上，“坚持”在示例中使用布局也是相当愚蠢的。无论发生什么情况，用户都无法从您试图将固定布局强加于他们的小屏幕上获益。你最好把时间花在为较小的屏幕找到一个不同的布局上，这样做很有效，而且不需要像通过JS计算所有测量值这样荒谬的测量值。以你的徽标为例，这似乎占到了总屏幕宽度的1/4到1/3之间——为什么即使在最小的屏幕上，你也要坚持这样做？作为一个小屏幕设备的用户，我对它毫不在意——它只是在窃取有价值的不动产，可以用来展示我感兴趣的实际内容……我同意。这更像是一种概念验证标记。事实上，我已经完全抛弃了我正在开发的dev版本中的徽标，因为它被烘焙到了其他图像中。我并不是想让所有的屏幕都一样。在较小的屏幕上，应该几乎没有任何元素。。。我的理念一直是移动第一。我只是想在不滚动的情况下，让身体适合屏幕。。。那么屏幕上应该显示什么由大小和纵横比决定。@slime，媒体查询不是问题。实体模型使用它们。缺少对视口单位和计算的浏览器支持。它没有得到数字。。。就是能够使用它们。
var screenSize = screen.width;
var elemSize=window.getComputedStyle(document.getElementById("yourElement"))
var elemSize=parseInt(elemSize.fontSize)
var vwValue= (elemSize*100)/screenSize
yourElement.style.fontSize=yourVwAmount+"vw"