0

キャンバスなしで HTML5 ゲームを作成していて、div の比率を 16:9 に維持したいと考えています。これは JavaScript で簡単に実行でき、完全に機能します。しかし、div 自体の内部の要素は、(画面が大きい場合) 大きくなりすぎることがあります。最大/最小の高さ/幅は知っていますが、ゲームがスケーリングされているかのようにする他の方法はありますか?

js と css のコードは次のとおりです。

function fix() {
    var gameWidth = $(window).width();
    var gameHeight = $(window).height();
    var fitX = gameWidth / 800;
    var fitY = gameHeight / 480;


    var screenRatio = gameWidth / gameHeight;
    var optimalRatio = Math.min(fitX, fitY);


    // checking ratio
    if( screenRatio >= 1.77 && screenRatio <= 1.79)
    {
        $('#game').width ($(window).Width + 'px');
        $('#game').height ($(window).Height + 'px');
    } 
    else 
    {
        $('#game').width (800 * optimalRatio + 'px');
        $('#game').height (480 * optimalRatio + 'px');
    }

    $('#game').center();
}

関数はその仕事を完全にうまくやっています。しかし、ここのCSSは私が問題を抱えているものです。

#game {
    width: 800px;
    height: 480px;
    background: url(bg.png);
    position: relative;
}

.landing {
    position: absolute;
    width: 20%;
    max-width: 190px;
    height: 60%;
    max-height: 290px;
    bottom: 10%;
    background: #ff6600;
    text-align: center;
}

190/290 の比率を維持しながら着陸がスケーリングされるようにしたい..ありがとう。

4

1 に答える 1

0

パーセントではなく、「em」単位です。

外側の div の font-size を 10px に設定すると、1.0em は 10 ピクセルに等しくなります。内部のすべての要素に「em」を使用すると、外側の div の font-size を変更するだけで、他のすべてがスケーリングされます。

警告: ネストされた 'em' フォント サイズは乗算されるため、これらは子を持たない 'leaf' 要素でのみ使用してください。少なくとも「em」ユニット自体を使用する子供はいません

利点は何ですか？jQuery で外側の要素のスケールをいじる必要はありません。

利用可能なスペースに依存したい場合は、jquery を使用してウィンドウのサイズを変更し、その場合は外側のラップのフォント サイズのみを変更する必要があります。

http://jsfiddle.net/HerrSerker/a8yc7/

HTML

<button class="five">50%</button>
<button class="ten">100%</button>
<button class="fifteen">150%</button>
<button class="twenty">200%</button>
<div class="wrap">
    <div class="container">
        <div class="elem elem1"></div>
        <div class="elem elem2"></div>
        <div class="elem elem3"></div>
        <div class="elem elem4"></div>
    </div>
</div>

CSS

.wrap {
    font-size: 10px;
}

.container {
    width: 30em;
    height: 20em;
    border: 1px solid gold;
    position: relative;
    overflow: hidden;
}

.elem {
    position: absolute;
    width: 10em;
    height: 10em;
}

.elem1 {
    background: silver;
    top: 8em;
    left: -5em;
}
.elem2 {
    background: green;
    top: -2em;
    left: 12em;
}
.elem3 {
    background: gray;
    top: -3em;
    left: 13em;
}
.elem4 {
    background: red;
    top: 5em;
    left: 2em;
}

jQuery

$('.five').on('click', function() {
    $('.wrap').css({
        fontSize: '5px'
    })
})
$('.ten').on('click', function() {
    $('.wrap').css({
        fontSize: '10px'
    })
})
$('.fifteen').on('click', function() {
    $('.wrap').css({
        fontSize: '15px'
    })
})
$('.twenty').on('click', function() {
    $('.wrap').css({
        fontSize: '20px'
    })
})
于 2013-10-09T09:00:22.960 に答える