Я работаю над браузером HTML5, который можно разделить на 3 части: две панели пользовательского интерфейса слева и справа от центра набора квадратных холстов для игровой поверхности. Три панели должны быть выровнены по горизонтали, а общая игра должна поддерживать соотношение сторон 16: 9. Левая и правая панели должны быть одинаковой ширины, а все три панели должны быть одинаковой высоты. Я указал минимальную ширину и высоту внутри функции resize(), вызванной при обнаружении события onresize.Programmatically Resize Divs
В настоящее время каждая панель является div, и все три содержатся внутри раздела. Прямо сейчас, раздел не нужен, но я хочу, чтобы игра была отделена от дополнительного контента в нижней части экрана, который я мог бы добавить позже.
Стиль CSS выглядит следующим образом:
* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}
#gameSection {
white-space: nowrap;
overflow-x: hide;
overflow-y: hide;
}
#leftPanel, #centerPanel, #rightPanel {
display: inline-block;
}
#leftPanel {
background-color: #6495ed;
}
#centerPanel {
background-color: #e0ffff;
}
#rightPanel {
background-color: #b0c4de;
Прямо сейчас, я поставил цвет фона каждого Div, чтобы показать мне, когда я правильно настроить размер каждого дел.
Тело моего HTML-документ выглядит следующим образом:
<body onresize="resize()">
<section id="gameSection">
<div id="leftPanel">Left Panel.</div>
<div id="centerPanel">Center Panel.</div>
<div id="rightPanel">Right Panel.</div>
</section>
</body>
И, наконец, функция моего размера() (я создал отдельную функцию для изменения размера игры в случае, если добавить больше элементов ниже позже):
function resize() {
var MIN_GAME_WIDTH = 800;
var MIN_GAME_HEIGHT = 450;
var GAME_ASPECT_RATIO = 16/9;
var width = window.innerWidth;
var height = window.innerHeight;
var gWidth, gHeight;
if(width < MIN_GAME_WIDTH || height < MIN_GAME_HEIGHT) {
gWidth = MIN_GAME_WIDTH;
gHeight = MIN_GAME_HEIGHT;
}
else if ((width/height) > GAME_ASPECT_RATIO) {
<!-- width is too large for height -->
gHeight = height;
gWidth = height * GAME_ASPECT_RATIO;
}
else {
<!-- height is too large for width -->
gWidth = width;
gHeight = width/GAME_ASPECT_RATIO;
}
resizeGame(gWidth, gHeight, GAME_ASPECT_RATIO);
}
function resizeGame(var gWidth, var gHeight, var aspectRatio) {
var gSection = document.getElementById("gameSection");
var lPanel = document.getElementById("leftPanel");
var cPanel = document.getElementById("centerPanel");
var rPanel = document.getElementById("rightPanel");
gSection.height = gHeight;
gSection.width = gWidth;
<!-- should the below be taken care of in the CSS? -->
lPanel.height = gHeight;
cPanel.height = gHeight;
rPanel.height = gHeight;
cPanel.width = cPanel.height;
lPanel.width = (gWidth - cPanel.width)/2;
rPanel.width = lPanel.width;
}
Я пробовал несколько разных команд для изменения размеров div, но он просто не работает для меня. Когда я пытаюсь добавить тестовые холсты, появляется цвет, но ящики по-прежнему не соответствуют размеру. Я также рассмотрел загрузку невидимого фонового изображения на каждый div и масштабирование его до нужного размера; Тем не менее, я смог изменить размер моего холста с использованием вышеуказанного метода раньше, и он, казалось, работал нормально.
Дополнительные примечания
Хотя я уже имел довольно хороший успех изменения размера единого холста, я не хочу использовать только один холст для игры, потому что не все части пользовательского интерфейса должны быть сделаны на в то же время.
Я пытаюсь сохранить это исключительно в Javascript.
Я подозреваю, что могу просто использовать CSS для изменения размеров, установив соотношение сторон 16: 9 и используя ширину: 56,25% для центральной панели и ширины: 21,875% для боковых панелей, но это ограничивает меня одним и не объясняет, почему мой сценарий не работает.
Я могу предоставить весь HTML-файл, если это необходимо. Вот как это должно выглядеть: End Goal (without right panel)
Спасибо!
UDPATE:
jsfiddle
Можете ли вы предоставить codepen.io или jsfiddle? –
добавил jsfiddle. который я сохранил, но я не уверен, что он исчезнет, если я закрою браузер. Это мой первый раз, используя его. – tstevens
какая поддержка браузера вам нужна? это довольно легко сделать с помощью css с помощью flex box –