2

所以我想让“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>
4

3 回答 3

0

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

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();
}
于 2013-01-28T22:31:06.123 回答
0

我过去曾使用过 jquery 插件fittext.js来处理这种事情，并且效果很好。

于 2013-01-28T22:39:20.943 回答
0

如果将文本包装在 aspan中，则可以获得文本offsetWidth 

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

的div宽度用left: 0pxand固定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

于 2013-01-28T23:17:33.687 回答