Question

目标：适合任何屏幕尺寸和方向的网站，无需滚动。在SassMeister中，我有一个荒谬的数学问题包装部分，每个媒体查询都有不同的布局：

http://sassmeister.com/gist/8f9954aa8973b97f43c8

我能做到的唯一方法是使用基于vh和vw的计算来确定所有div的大小。 calc和视口单元都是safari 5，Opera mini，IE8的问题。

如果不访问vh，vw，calc，任何polyfill都将无法完全适合屏幕而无需滚动。

所以...我是新手，不要扔西红柿，但是使用javascript可能（而不是疯狂）：

1）在加载时调整vh和vw值并调整大小（这部分我知道可以用视口，边缘等完成）

2）用相同的内部javascript替换所有css calc函数

3）将得到的div大小输出到样式表

非常感谢，但我意识到这将意味着javascript负责整个布局，这是不赞成的。我只是看不出怎么做。如果有一个坚实的实践原因，这个概念注定要失败，或者另一种方法，我也想知道这一点。

谢谢。

Answer 1

我可以回答有关javascript取代vw和vh的部分。在我的代码中，他们没有工作，所以我不得不提出替代方案。这是：

首先，我为body标签设置了一个onload函数。

<body onload="screenSize()">

然后我有了javascript：

<script type="text/javascript">
    function screenSize(){var screenSize=screen.width;
    document.body.style.fontSize=screenSize+"px"}
</script>

这样做是因为它将基本字体设置为屏幕宽度中的像素数量。声明字体大小时，可以使用％measurement而不是vw。您可以这样做的原因是因为您将大小设置为整个屏幕，因此1％表示字体大小为屏幕的1％或1vw。我不确定这是否有效，而不是vh，但这使我的代码响应不同的屏幕，我没有使用单个媒体查询。希望这有帮助。

编辑：对不起，我误解了。为了获得vw值，您将使用前面的脚本然后添加此脚本：

var screenSize = screen.width;
var elemSize=window.getComputedStyle(document.getElementById("yourElement"))
var elemSize=parseInt(elemSize.fontSize)
var vwValue= (elemSize*100)/screenSize

变量vwValue是元素上的vw的大小。我敢肯定，如果你正在调整，你可以将脚本设置为

yourElement.style.fontSize=yourVwAmount+"vw"

使用javascript进行所有div大小调整以克服浏览器对vh，vm和css calc的支持

1 个答案: