javascript - div 及其元素的纵横比

Question

我正在构建一个没有 Canvas 的 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 比率的同时着陆比例..谢谢。

Answer 1

不是百分比而是“em”单位。

将外部 div 的字体大小设置为 10px，然后 1.0em 等于 10 像素。如果您对内部的每个元素都使用“em”，您只需更改外部 div 的字体大小，其他所有内容都会缩放。

CAVE:嵌套的 'em' 字体大小会成倍增加，因此只在没有子元素的 'leaf' 元素上使用它们。至少没有 child 自己使用“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'
    })
})