1

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

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

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

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

提前致谢，

卢卡

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

4

5 回答 5

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

于 2013-03-22T16:17:01.430 回答
1

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

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

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

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

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

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

于 2013-03-22T16:10:06.687 回答
1

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

$(".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"});
});
于 2013-03-22T16:11:04.647 回答
0

试试这个：

<script type="text/javascript">
    $(document).ready(function() {
        $(window).resize(function() {
            document.getElementById("text").style.fontSize = $(".container").height(); 
            // let container is a class 
        });
    });
</script>
于 2013-03-22T16:12:02.910 回答
-1

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

var constant = [Some magic number]    

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

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

于 2013-03-22T16:12:13.633 回答