相对于容器的字体大小 [英] Font size relative to container

问题描述

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

 < script type =text / javascript > 
 $（document）.ready（function（）{
 while（true）{
 document.getElementById（text）。style.fontSize = $（container）。height ）; 
} 
}）; 
< / script> 
  

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

我把脚本放在head标签中，并且它不起作用。我不知道脚本是否错误，或者它没有运行。我究竟做错了什么？
另外我想延迟脚本的结尾，以避免它疯狂运行，但我不知道该怎么做。

预先感谢，

Luca

感谢答案，但没有任何工作。
我猜这个脚本没有运行，可能是什么错误？请帮助！

解决方案

您应该尝试这样的方式代替（如果我正确理解您想要执行的操作）：

  $（。container）。each（function（）{//如果容器是一个类
 $（'。文本'，$（this））。css（{'font-size'：$（this）.height（）+px}）; //你的文档中只应该有1个#text， 
}）; 
  

或类似的东西

<$ p $ （）; $（$'$'）; $（$''''）。 ）+px}）;
}）;

i am designing a site that adjusts itself to the window size, and i need to make the text size relative to it's container (a div). I searched about doing it with css, and found out that it is not possible. So i am trying with JavaScript, but i am not a JavaScript programmer. So i searched each piece of the code i needed and compiled it to this:

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

(the "while" is to re-size it constantly, considering that the user might re-size the window)

I put the script in the "head" tag, and it doesn't work. I don't know if the script is wrong, or if it is not running. What am i doing wrong? Also i want to put a delay in the end of the script, to avoid it running like crazy, but i don't know how to do that.

Thanks in advance,

Luca

Thanks to the answers, but nothing working. I guess that the script is not running, what can be wrong??? Please help!

解决方案

You should try something like this instead (if I understand correctly what you want to do):

$(".container").each(function(){ //if container is a class
    $('.text', $(this)).css({'font-size': $(this).height()+"px"}); //you should only have 1 #text in your document, instead, use class
});

or something more like this

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

这篇关于相对于容器的字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！