Javascript 相对于容器的字体大小

我正在设计一个可以根据窗口大小进行自我调整的站点，并且我需要使文本大小相对于它的容器（一个div）。我搜索了一下css，发现这是不可能的。所以我尝试使用JavaScript，但我不是JavaScript程序员。因此，我搜索了我需要的每一段代码，并将其编译为：

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

$（文档）.ready（函数（）{
while（true）{
document.getElementById（“text”）.style.fontSize=$（“容器”）.height（）；
}
});

（考虑到用户可能会重新调整窗口大小，“while”是不断地重新调整窗口大小）

我把脚本放在“head”标签上，但它不起作用。我不知道脚本是错的，还是没有运行。我做错了什么？ 我还想在脚本的末尾加一个延迟，以避免它像疯了一样运行，但我不知道如何做到这一点

提前感谢,

卢卡

多亏了这些答案，但没有任何效果。

---

我猜脚本没有运行，有什么问题吗？？？请帮忙

如果您的意思是创建一个响应站点，那么您可以根据窗口大小调整处理程序中的

document.documentElement.clientWidth

更改字体大小

此外，您还可以使用

em

单元，而不是可伸缩且便于移动的像素

CSS3还有一个新的有趣的“根em”单元：

CSS3引入了一些新装置，包括rem装置，其 对于“根em”。如果这还没有让你入睡，那么让我们看看 rem是如何工作的

em单位与父级的字体大小有关，这会导致 复利问题。rem单位相对于根或根 html元素。这意味着我们可以在屏幕上定义单个字体大小 html元素，并将所有rem单位定义为其中的一个百分比

---

您应该尝试类似的方法（如果我正确理解您的想法）：

或者更像这样的

$(window).resize(function(){
    $('.text').css({'font-size': $('#container').height()+"px"});
});

试试这个：

<script type="text/javascript">
    $(document).ready(function() {
        $(window).resize(function() {
            document.getElementById("text").style.fontSize = $(".container").height(); 
            // let container is a class 
        });
    });
</script>

$（文档）.ready（函数（）{
$（窗口）。调整大小（函数（）{
document.getElementById（“text”）.style.fontSize=$（“.container”）.height（）；
//让容器是一个类
});
});

您可以使用.resize（）事件处理程序，该处理程序仅在调整窗口大小时启动

var constant = [Some magic number]    

$(window).resize(function() {
    var fontSize = $(this).height()*$(this).width()*constant;
    $(html).css("font-size",fontSize)
}

使用常量根据新的宽度/高度计算字体大小

可以使用视口单位：

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

目前还没有完全的支持，但IE10、Chrome、Firefox和Safari都支持它

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

---

兼容性：

虽然（true）

是一个无限循环，但至少应该使用

setInterval

。但是我不明白你为什么要这样调整它的大小。您试过了吗？在文档完成加载时，您可能不想运行

while（true）

循环，而只想在窗口大小调整事件上运行字体大小调整代码（因为您使用的是jQuery，所以可以使用它们的事件绑定器）@Sanchit:

em

与容器大小无关。@Sanchit

em

s与容器无关，而是与父字体大小有关。而且，

em

不保证在调整窗口大小时字体会调整大小。Hrm-给我一个。我用谷歌搜索了一下。我的错我以为是集装箱（可能还需要附加一个单元，如

+'px'

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