0

目标：无需滚动即可流畅地适应任何屏幕尺寸和方向的网站。在 SassMeister 中，我用每个媒体查询的不同布局解决了荒谬的数学问题打包部分：

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

我能做到的唯一方法是使用基于 vh 和 vw 的 calc 来调整所有 div 的大小。计算和视口单位对于 safari 5、Opera mini、IE8 来说都是一个问题。

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

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

1）在加载和调整大小时检索 vh 和 vw 值（我知道这部分可以通过视口、边缘等来完成）

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

3) 将生成的 div 大小输出到样式表

非常感谢您的帮助，但我意识到这意味着 javascript 负责整个布局，这是不受欢迎的。我只是不知道该怎么做。如果有一个坚实的实际原因，这个概念注定要失败，或者其他方法，我也想知道这一点。

谢谢你。

4

1 回答 1

0

我可以回答关于 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>

这样做的目的是将基本字体设置为屏幕宽度中的像素数量。声明字体大小时，可以使用 % 度量而不是 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"
于 2015-02-27T07:07:32.433 回答