为记忆游戏制作动态正方形div

Question

什么是使响应式动态div-s正方形的最简单方法，就像在内存游戏中一样(下图)。

​

我有问题，用户需要向下滚动看到整个游戏的底部。我如何计算(最简单的解决方案)，我的整个游戏总是可见的。我还希望它是动态的(在图像上我们可以看到4x4游戏，应该适用于任何数字，7x7，10x10等等)。

我的代码片段是：http://jsbin.com/nucovakevu/edit?html,css,output。中的所有内容都是由JavaScript动态添加的。在我放大的地方它也不起作用。我是前端开发的初学者，我在这里混合了bootstrap和纯css，这可能不是一个好的解决方案。我还使用了这个css技巧来使我的div成为响应式正方形：

 width: 23%; 
 height: 15vw;

它应该是这样的：

 width: 23%; 
 height: 23vw;

但在这种情况下，我使用的是矩形，因为我显然不太了解它是如何工作的。

Answer 1

只要想要更新网格，就调用函数size()；。

请查看代码中的注释，以便更好地了解它是如何工作的。

https://jsfiddle.net/xn5j4rcf/

​

window.addEventListener('load', function() {
  size();
});

function size() {
  var container = document.getElementById('container');
  container.innerHTML = '';//don't want any extra boxes when you call this function again
  var x = Math.floor(window.innerWidth / 50);//width of boxes that can fit; remove any decimal places
  var y = Math.floor(window.innerHeight / 50);//height of boxes that can fit; remove any decimal places
  for (var i = 0; i < x * y; i++) {//multiply x*y to get total area of boxes that can fit
    var box = document.createElement('div');//create a div
    box.className = 'box';//assign class
    container.appendChild(box);//append
  }
}

window.addEventListener('resize', function() {
  size();//call the function again when the window is resized
});

.box {
  width: 50px;
  height: 50px;
  padding: 4px;
  -o-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  border: 4px solid #fff;//border for margin but use border-box to make sure the width and height are still 50px
  background-color: #ddd;
}
html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
#container {
  font-size: 0;//remove annoying margin from display:inline-block;
}

<div id="container">

</div>

​

Answer 2

这种方法是可以实现的，但有一点古怪的技巧和兼容性并不好：

演示：response divs with full screen

这里使用了表格单元的灵活性和写入模式来改变流程的方向

css代码爆炸：

html,body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.wrap{
  width: 100%;
  height: 100%;

  -webkit-writing-mode: vertical-lr;
  display: table;
  table-layout: fixed;

  background-color: #000;
}

.row-wrap{
  display: table-cell;
}

.row{
  width: 100%;
  height: 100%;
  display: table;
  table-layout: fixed;

  -webkit-writing-mode: horizontal-tb;
}

.item{
  display: table-cell;
  height: 100%;

  border: 1px solid #ffffff;
  box-sizing: border-box;
}