Question

所以我想根据浏览器的宽度调整“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>

Answer 1

我不确定你为什么要使用所有比例的东西。这是一个仅基于宽度的简单示例。

http://jsfiddle.net/tHBpJ/3

var text_div = document.getElementById("header");
var initWinW = window.innerWidth;
var initFontSize = 40;

var size = function () {
    var winW = window.innerWidth;
    var textFactor = winW / initWinW
    text_div.style.fontSize = initFontSize * textFactor + "px";
}

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

Answer 2

我过去曾经使用jquery插件fittext.js来处理这种事情，而且它的工作效果非常好。

Answer 3

如果您将文字换成span，则可以获得文字offsetWidth

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

div的宽度由left: 0px和right: 0px

修正

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

然后动态调整font-size。 for是为了防止无限循环

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();

JSFiddle

如何使文本可以调整大小？

3 个答案: