Соотношение сторон для div и его элементов

Question

Соотношение сторон для div и его элементов

0

Я создаю игру HTML5 без холста и хочу сохранить соотношение 16: 9 для моего div. Это легко сделать с помощью javascript, и он работает отлично. Но элементы внутри самого div, они когда-то становятся слишком большими (если экран большой). Я знаю max/min-height/width, но есть ли другой способ сделать так, как если бы игра масштабировалась?

вот код для 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.. спасибо.

doctor penguin 09 окт. 2013, в 08:03

Источник

1

Простой способ использовать пресеты для этого. Я имею в виду использовать ширину для основного div и для других элементов внутри него использовать precents.
ncm 09 окт. 2013, в 05:09
0

Я делаю это атм .. но проблема в том, что когда экран слишком большой, элемент теряет свое соотношение. =. = скриншоты, чтобы уточнить, что я имею в виду: маленький экран: [ссылка] prntscr.com/1w6jgd большой экран: [ссылка] prntscr.com/1w6jh5
doctor penguin 09 окт. 2013, в 05:15
0

Я не могу понять, что вы имеете в виду, но вы можете иметь в виду две вещи. один, который вы хотите иметь вещи в фиксированном соотношении, поэтому, если экран становится больше, вы хотите, чтобы элементы оставались маленькими (т.е. один элемент всегда был 40px * 60px), а во-вторых, вы хотите, чтобы элемент всегда был 10% процентов экрана. кого из них вы имели ввиду?
ncm 09 окт. 2013, в 05:29
0

я хочу сказать, что я хочу, чтобы размер масштабируемого элемента не выходил из-под контроля для неожиданных результатов ... Я сейчас использую max-height / width, но это не так ...
doctor penguin 09 окт. 2013, в 05:43
0

ОК, вы можете сделать это двумя способами: один использовать три, четыре или другие размеры + отзывчивый вид, а второй - два, использовать преценты, и тогда вы можете иметь размер окна любого размера, который вы хотите, но я предлагаю вам сначала напечатать.
ncm 09 окт. 2013, в 05:45
0

Вы имеете в виду, что процентный рост будет рассчитываться относительно ширины родителей, а не высоты ?
yunzen 09 окт. 2013, в 09:23

Показать ещё 4 комментария

Теги:

javascript

html

css

html5

1 ответ

Ещё вопросы

Простой способ использовать пресеты для этого. Я имею в виду использовать ширину для основного div и для других элементов внутри него использовать precents.
Я делаю это атм .. но проблема в том, что когда экран слишком большой, элемент теряет свое соотношение. =. = скриншоты, чтобы уточнить, что я имею в виду: маленький экран: [ссылка] prntscr.com/1w6jgd большой экран: [ссылка] prntscr.com/1w6jh5
Я не могу понять, что вы имеете в виду, но вы можете иметь в виду две вещи. один, который вы хотите иметь вещи в фиксированном соотношении, поэтому, если экран становится больше, вы хотите, чтобы элементы оставались маленькими (т.е. один элемент всегда был 40px * 60px), а во-вторых, вы хотите, чтобы элемент всегда был 10% процентов экрана. кого из них вы имели ввиду?
я хочу сказать, что я хочу, чтобы размер масштабируемого элемента не выходил из-под контроля для неожиданных результатов ... Я сейчас использую max-height / width, но это не так ...
ОК, вы можете сделать это двумя способами: один использовать три, четыре или другие размеры + отзывчивый вид, а второй - два, использовать преценты, и тогда вы можете иметь размер окна любого размера, который вы хотите, но я предлагаю вам сначала напечатать.
Вы имеете в виду, что процентный рост будет рассчитываться относительно ширины родителей, а не высоты ?

HerrSerker · Accepted Answer · 2013-10-09T07-24-00.000Z

Не проценты - это путь, кроме "единиц".

Установите размер шрифта внешнего div на 10px, а затем 1.0em равно 10 пикселям. Если вы используете "em" для каждого элемента внутри, вы просто изменяете размер шрифта внешнего div, а все остальное масштабируется.

CAVE: размер шрифта Nested 'em' будет умножаться, поэтому используйте только те элементы "leaf", у которых нет детей. По крайней мере, нет детей, которые сами используют их

Каким будет преимущество? Вам не нужно возиться со шкалой внешнего элемента с помощью 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'
    })
})

По какой-то причине я продолжал думать, что их не следует использовать для элементов. В любом случае, использовали эту идею, чтобы размер шрифта равнялся ширине / 100 игры. Итак, 8, если 800, и так далее. Благодарю. :-)