Question

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

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

（＆＃34;而＆＃34;是为了不断重新调整大小，考虑到用户可能会重新调整窗口大小）

我把脚本放在＆＃34; head＆＃34;标签，它不起作用。我不知道脚本是否错误，或者它是否未运行。我究竟做错了什么？另外，我想在脚本的末尾加一个延迟，以避免它像疯了一样运行，但我不知道该怎么做。

提前致谢，

卢卡

感谢答案，但没有任何效果。我猜那个脚本没有运行，有什么不对的???请帮忙！

Answer 1

如果您的意思是制作自适应网站，则可以根据窗口调整大小处理程序内的document.documentElement.clientWidth更改字体大小。

此外，您可以使用em单位代替可扩展且适合移动设备的像素。

CSS3还有一个新的有趣的＆＃34; root em＆＃34;单位：

CSS3引入了一些新的单元，包括rem单元   for＆＃34; root em＆＃34;。如果这还没有让你入睡，那么让我们来看看吧   如何使用。

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

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

Answer 2

你应该尝试这样的事情（如果我理解你想做什么）：

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

Answer 3

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

Answer 4

试试这个：

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

Answer 5

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

var constant = [Some magic number]    

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

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

相对于容器的字体大小

5 个答案: