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

私は過去にこの種のことのために jquery プラグインfittext.jsを使用しましたが、非常にうまく機能しました。

于 2013-01-28T22:39:20.943 に答える
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

テキストを でラップする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

于 2013-01-28T23:17:33.687 に答える