Question

我在CSS和JavaScript中创建一个简单的游戏，我希望游戏场是二次的，它的宽度/高度取决于视口高度。但是，如果视口宽度小于高度，我希望字段大小相应地更新并保持1：1的比例。

这是我的代码：

<div class="field">
    <div class="player">
    </div>
</div>

.field {
    width: 75vh;
    height: 75vh;
    background: #B2EBF2;
    border: 1.25vh solid #0097A7;
}
.field .player {
    width: 5vh;
    height: 5vh;
    background: #727272;
}

JSFiddle demo

更改窗口/视口高度时可以使用，但不能更改宽度。当视口宽度改变时，如何使div响应并始终呈二次方？

由于

Answer 1

使用CSS媒体查询来测试视口是纵向还是横向。在纵向中，宽度是最小距离，必须考虑。在景观中，它是最小的高度。

fiddle

@media only screen and (orientation: portrait) {
    .field {
        width: 75vw;
        height: 75vw;
    }
}

@media only screen and (orientation: landscape) {
    .field {
        width: 75vh;
        height: 75vh;
    }
}

.field {
    background: #B2EBF2;
    border: 1.25vh solid #0097A7;
}

.field .player {
    width: 5vh;
    height: 5vh;
    background: #727272;
}

Answer 2

只给出字段最小宽度和最小高度

function createFunction(num) {
  return function() {
    alert(num);
  }
}

// Created a new function, without calling it
var myFunction = createFunction(32); 

// Call that function
myFunction();

我希望它能解决问题

响应性且始终是二次/ 1：1比率div

2 个答案: