相对于容器的字体大小答案

【问题标题】：Font size relative to container相对于容器的字体大小
【发布时间】：2013-03-12 13:46:45
【问题描述】：

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

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

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

我将脚本放在“head”标签中，但它不起作用。我不知道脚本是否错误，或者它是否没有运行。我究竟做错了什么？另外我想在脚本的末尾放一个延迟，以避免它像疯了一样运行，但我不知道该怎么做。

提前致谢，

卢卡

感谢答案，但没有任何效果。我猜脚本没有运行，有什么问题？？？请帮忙！

【问题讨论】：

while(true) 是一个无限循环，你至少应该使用setInterval。但是我不明白为什么你应该这样调整它。你试过$(window).resize()吗？
当文档完成加载时，您可能只想让字体大小调整代码在窗口调整大小事件上运行，而不是运行while (true) 循环（因为您使用的是 jQuery，您可以使用它们.resize() 事件绑定器）。
@Sanchit: em 不相对于容器大小。
@Sanchit ems 与容器无关，而是与父字体大小相关。此外，em 不保证在调整窗口大小时字体会调整大小。
Hrm... -1 对我来说。我做了一些谷歌搜索。我的坏我认为它是容器。 :(

标签： javascript jquery html css font-size

【解决方案1】：

如果您的意思是您正在制作一个响应式网站，那么您可以根据窗口调整大小处理程序中的document.documentElement.clientWidth 更改字体大小。

此外，您可以使用em 单位而不是可缩放且适合移动设备的像素。

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

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

em 单位是相对于父级字体大小的，这会导致复合问题。 rem 单位是相对于根或 html——元素。这意味着我们可以在 html 元素并将所有 rem 单位定义为其百分比。

http://snook.ca/archives/html_and_css/font-size-with-rem

【讨论】：

【解决方案2】：

http://jsfiddle.net/AyRMC/

您可以使用视口单位：

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

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

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

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

【讨论】：

【解决方案3】：

您可以使用 .resize() 事件处理程序，该处理程序仅在调整窗口大小时触发

var constant = [Some magic number]    

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

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

【讨论】：

可能还需要附加一个单位，例如+'px'

【解决方案4】：

试试这个：

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

【讨论】：

【解决方案5】：

你应该尝试这样的事情（如果我理解正确的话）：

$(".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
});

或者类似的东西

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

【讨论】：