Question

我想我之前已经问过这个问题，所以如果我可以重新回答答案（或给出一些建议），我会感激不尽。

所以，下面的代码绘制了一个15乘7的网格，我想要的是自动调整大小，保持比例，每次我（a）调整窗口大小或（b）加载，比如平板电脑或手机。

即。屏幕上的结果应该是完整的15 * 7网格。这是代码（我试过bootstrap，但显然没有正确使用它）。谢谢你的帮助。

var stage = document.querySelector("#stage");
var pattern = [
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
]
var SIZE = 60;
var SPACE = 0;
var ROWS = pattern.length;
var COLUMNS = pattern[0].length;

for (var row = 0; row < ROWS; row++) {
  for (var column = 0; column < COLUMNS; column++) {
    //Create a div HTML element called cell
    var cell = document.createElement("div");
    //Set its CSS class to "cell"
    cell.setAttribute("class", "cell");
    //Add the div HTML element to the stage
    stage.appendChild(cell);
    //Make it black if it's a "1"
    if (pattern[row][column] === 1) {
      cell.style.backgroundColor = "black";
    }
    //Position the cell in the correct place
    //with 10 pixels of space around it
    cell.style.top = row * (SIZE + SPACE) + "px";
    cell.style.left = column * (SIZE + SPACE) + "px";
  }
}

html,
body {
  height: 100%;
}
#stage {
  position: relative;
  height: 100%;
}
.cell {
  position: absolute;
  width: 60px;
  height: 60px;
  border: 1px solid gray;
  background-color: white;
}

<div class="container">
  <div class="row">
    <h1>Grid</h1>
    <div id="stage"></div>
  </div>
</div>

Answer 1

我建议使用带填充的伪元素来处理具有自动高度的框的宽高比。这是因为填充百分比是父宽度的百分比，而不是高度。

.cell:before{
  content: '';
  display: block;
  width: 100%;
  padding-top: 100%;
}

在您的情况下，您的单元格也需要按百分比而不是js中的像素值进行定位。

小提琴：http://jsfiddle.net/zukrLbqp/1/

另一个提示，略微偏离原始问题，但还有其他方法可以用css定位你的元素，这将取消在js中完成它的需要。如果您希望我了解其工作原理，请告诉我，但这里有一个示例：http://jsfiddle.net/eys59y17/

Answer 2

位置绝对更改为显示内联块每行结束后的BR和现在单元的大小为6vw x 6vw（对于1000px窗口，eq为60px）
http://dx-creation.com/js/flexgrid.html

<style>
    html, body {
        height: 100%;
    }
    #stage{
        position:relative;
    }

    .cell{
        display: inline-block;
        width: 6vw;
        height: 6vw;
        border: 1px solid gray;
        background-color: white;
    }

</style>


<div class ="container">
    <div class = "row">
        <h1>Grid</h1>
        <div id="stage"></div>
    </div>
</div>
<script>
    var stage = document.querySelector("#stage");
    var pattern = [
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
    ]
    var SIZE = 60;
    var SPACE = 0;
    var ROWS =pattern.length;
    var COLUMNS = pattern[0].length;

    for(var row = 0; row < ROWS; row++)
    {
        for(var column = 0; column < COLUMNS; column++)
        {
            //Create a div HTML element called cell
            var cell = document.createElement("div");
            //Set its CSS class to "cell"
            cell.setAttribute("class", "cell");
            //Add the div HTML element to the stage
            stage.appendChild(cell);
            //Make it black if it's a "1"
            if(pattern[row][column] === 1)
            {
            cell.style.backgroundColor = "black";
            }
            //Position the cell in the correct place
            //with 10 pixels of space around it

        }
        document.write('<br>')
    }
</script>

Answer 3

最好的方法是将渲染和数据分开。

在这种情况下，每次更新数据时都可以触发渲染。您还可以在发生其他事情时触发渲染功能，例如屏幕调整大小。

以下是脚本的伪代码。我将整个功能包装到对象中。

var grid = {
    pattern: [], // Initial pattern data
    setCell: function(x,y,val){
        // Make changes to the pattern then...
        // you can update the pattern representation so that it is always up to date
        this.render();
    },
    render: function() {
        // Clear previous render
        // Render it again based on current size of browser of device.
    }
};

grid.render();

window.onresize(function(){
    grid.render.call(grid); // this will trigger the grid refresh.
});

grid.setCell(1,1,5); // this will also trigger grid refresh

Answer 4

您可以像这样使用flexbox：

小提琴：http://jsfiddle.net/hb8njk27/

*, *::before, *::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

#stage {
  display: flex;
  flex-wrap: wrap;
}

.cell {
  flex: 0 1 6.6%;
  height: 60px;
  border: 1px solid gray;
  background-color: white;
}

这基本上说，display: flex开启了flex。 flex-wrap: wrap允许项目转到多行。 flex上的cell是flex-grow，flex-shrink和flex-basis的简写。那么对于flex-grow，我们是否希望它们相对于其他项目增长？对于flex-shrink我们是否希望它们相对于其他项目缩小？是。对于flex-basis项目的长度是多少？好，每行15件，大约是100％的6.6％。

我还添加了box-sizing: border-box，以便边框的宽度包含在元素的宽度和高度中，这样边框就不会丢失百分比。

然后在您的代码中，我删除了此评论//Position the cell in the correct place下方的两行，因为不再需要它们。

最后一点，flex框仅在现代浏览器中支持。这基本上意味着IE以外的一切。 IE9中没有支持，IE10和11中没有支持。

调整div维持比例的大小

4 个答案: