javascript - 相对于容器的字体大小

Question

我正在设计一个根据窗口大小自行调整的网站，我需要使文本大小相对于它的容器(一个 div)。我搜索了有关使用 css 执行此操作的信息，发现这是不可能的。所以我正在尝试使用 JavaScript，但我不是 JavaScript 程序员。所以我搜索了我需要的每一段代码并将其编译为:

<script type="text/javascript">
    $(document).ready(function() {
        while(true) {
            document.getElementById("text").style.fontSize = $("container").height();
        }
    });
</script>

(考虑到用户可能会调整窗口大小，“while”是不断调整它的大小)

我将脚本放在“head”标签中，但它不起作用。不知道是脚本错了，还是没有运行。我究竟做错了什么？ 此外，我想在脚本末尾延迟，以避免它疯狂运行，但我不知道该怎么做。

提前致谢

卢卡

多亏了答案，但没有任何效果。 我猜脚本没有运行，有什么问题吗？？？请帮忙!

Answer 1

http://jsfiddle.net/AyRMC/

您可以使用视口(viewport)单位:

.vw{
    font-size:3vw;
    color:red;
}
.vh{
    font-size:3vh;
    color:green;
}
.vmin{
    font-size:3vmin;
    color:blue;
}

还没有完整支持，但 IE10、Chrome、Firefox 和 Safari 都支持它。

一个缺点(或可能的优点)是，至少在 chrome 中，文本不会随着视口(viewport)大小的调整而缩放。

兼容性:http://caniuse.com/viewport-units