Question

我正在构建一个没有画布的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'元素上使用这些元素。至少没有孩子自己使用'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'
    })
})

div及其元素的宽高比

1 个答案:

不是百分比，而是'em'单位。

HTML

CSS

的jQuery