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

Question

制作响应动态div-s square的最简单方法是什么，比如记忆游戏（下图）。

我有问题，用户需要向下滚动才能看到游戏的整个底部。如何计算（最简单的解决方案）整个游戏始终可见。而且我希望它是动态的（在图像上我们可以看到4x4游戏，任何数字都应该可以工作，7x7,10x10等等......）。

我的代码片段是：http://jsbin.com/nucovakevu/edit?html,css,output。 所有内容都是由JavaScript动态添加的。 它在我放大的地方也不起作用。 我是前端开发的初学者，我在这里混合了bootstrap和plain 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>