Javascript 如何使文本大小可调整到浏览器？_Javascript_Css

Javascript 如何使文本大小可调整到浏览器？

javascript css

Javascript 如何使文本大小可调整到浏览器？,javascript,css,Javascript,Css,所以我想让单词“WIDTH”根据浏览器的宽度调整大小。现在，只有单词周围的框会调整大小，但我希望单词也能调整大小。我觉得我的计算有问题 <!DOCTYPE html> <html> <head> <style> #header{ margin: 0px; font-size: 200px; display:inline; padding:0px; pos

所以我想让单词“WIDTH”根据浏览器的宽度调整大小。现在，只有单词周围的框会调整大小，但我希望单词也能调整大小。我觉得我的计算有问题

<!DOCTYPE html>
<html>
<head>


<style>

    #header{

        margin: 0px;
        font-size: 200px;
        display:inline;
        padding:0px;
        position:absolute;
        white-space:nowrap;
        overflow:hidden;
        border:thin solid black;
        height:800px;

    }

</style>
</head>

<body style="padding:0px;">
<div id="header"> WIDTH </div>

    <script>

        var text_div = document.getElementById("header");

        var size = function (){

            var winW = window.innerWidth;
            var winH = window.innerHeight;
            var win_ratio = winW/winH;
            var offset_width = text_div.offsetParent.clientWidth;
            var offset_height = text_div.clientHeight;
            var offset_ratio = offset_width / offset_height;
            text_div.style.width = offset_width + "px";
            document.title = winW + ":" + offset_height;
            text_div.style.fontSize=String(parseInt(winW/offset_ratio)) + "px";

        }

        window.onresize=function() {size();}

       //size();

   </script>
</body>
</html>


#标题{
边际：0px；
字体大小：200px；
显示：内联；
填充：0px；
位置：绝对位置；
空白：nowrap；
溢出：隐藏；
边框：薄而实的黑色；
高度：800px；
}
宽度
var text_div=document.getElementById（“标题”）；
变量大小=函数（）{
var winW=window.innerWidth；
var winH=window.innerHeight；
var win_比率=winW/winH；
var offset_width=text_div.offsetParent.clientWidth；
var offset_height=文本_div.clientHeight；
var偏移比率=偏移宽度/偏移高度；
text_div.style.width=偏移量_宽度+“px”；
document.title=winW+“：”+偏移量+高度；
text_div.style.fontSize=字符串（parseInt（winW/offset_比率））+“px”；
}
window.onresize=function（）{size（）；}
//大小（）；

我不知道你为什么要用所有的比率。下面是一个仅基于宽度的简单示例

我过去曾使用jquery插件来实现这类功能，它运行得非常好。

如果将文本包装在

span

中，则可以获得文本的

偏移宽度

<div id="header"><span>WIDTH</span></div>

然后动态调整

字体大小

。这样做的目的是防止无休止的循环

var epsilon = 5;
var div = document.getElementById('header');
var span = div.childNodes[0];

function size() {
    var dw = div.offsetWidth;
    var fs = 200;
    span.style.fontSize = fs + 'px';
    var cw = span.offsetWidth;
    for (var i = 0; i < 10 && Math.abs(cw - dw) > epsilon; ++i) {
        fs *= dw / cw;
        span.style.fontSize = fs + 'px';
        cw = span.offsetWidth;
    }
}

window.onresize = size;
size();

varε=5；
var div=document.getElementById（'header'）；
var span=div.childNodes[0]；
函数大小（）{
var dw=div.offsetWidth；
var-fs=200；
span.style.fontSize=fs+'px'；
var cw=跨度偏移网络宽度；
对于（var i=0；i<10&&Math.abs（cw-dw）>epsilon；++i）{
fs*=dw/cw；
span.style.fontSize=fs+'px'；
cw=跨距偏移网络宽度；
}
}
window.onresize=大小；
大小（）；

您可能还想看一看可能的副本。对不起，我固定了客户与报价的比率。不管怎样，我认为我的公式是错误的。摆弄。。。文本和容器只会变大。我猜的是逻辑问题而不是数学问题。谢谢！这是完美的：）对于for循环，我能不能也有“while（true）”，因为它是一个无限循环？@Jay是的，你当然可以。但我不会这么做，因为如果

cw

和

dw

的大小不一致，它可能会锁住你的电脑。您至少应该考虑到一些差异，请参阅更新的答案和JSFIDLE。

#header {
    position: absolute;
    left: 0px;
    right: 0px;
    border: 1px solid black;
}

var epsilon = 5;
var div = document.getElementById('header');
var span = div.childNodes[0];

function size() {
    var dw = div.offsetWidth;
    var fs = 200;
    span.style.fontSize = fs + 'px';
    var cw = span.offsetWidth;
    for (var i = 0; i < 10 && Math.abs(cw - dw) > epsilon; ++i) {
        fs *= dw / cw;
        span.style.fontSize = fs + 'px';
        cw = span.offsetWidth;
    }
}

window.onresize = size;
size();