Question

我正在尝试制作一个响应式3x3网格来放置我的noughts并穿越游戏。当我有一个最大化的屏幕时，它对我有用，但是一旦我将窗口缩小以检查响应性，一切都会变得混乱。这是怎么回事？我应该使用除了vh之外的其他东西吗？ http://codepen.io/apswak/pen/dXdjvW

<h3>Noughts and Crosses</h3>
<div class="gameGrid">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

的style.css

body {
  background-color: wheat;
  margin: 0;
  padding: 0;
}

.gameGrid {
  margin: 0 auto;
  padding: 0;
  width: 62vh;
  height: 62vh;
}

.cell {
  margin-bottom: -5px;
  display: inline-block;
  width: 18.82vh;
  height: 18.82vh;
  border: 5px solid green;
  background-color: blue;
}

Answer 1

我可能采取flexbox路线。我保留了你的gameGrid类，但添加了一个行类，在每行中，我添加了3个单元格。除非您愿意，否则不要担心naming。

.gameGrid {
  margin: 0 auto;
  padding: 0;
  width: 62vh;
  height: 62vh;
  background: green;
}
.gameGrid--row {
  display: flex;
  flex-flow: row;
  justify-content: space-around;
}
.gameGrid--cell {
  background: blue;
  margin: 5px;
  flex: 1 0 auto;
}
.gameGrid--cell:before {
  content: '';
  float: left;
  padding-top: 100%;
}

<div class="gameGrid">
  <div class="gameGrid--row">
    <div class="gameGrid--cell"></div>
    <div class="gameGrid--cell"></div>
    <div class="gameGrid--cell"></div>
  </div>
  <div class="gameGrid--row">
    <div class="gameGrid--cell"></div>
    <div class="gameGrid--cell"></div>
    <div class="gameGrid--cell"></div>
  </div>
  <div class="gameGrid--row">
    <div class="gameGrid--cell"></div>
    <div class="gameGrid--cell"></div>
    <div class="gameGrid--cell"></div>
  </div>
</div>

CSS：响应式3x3网格搞乱窗口调整大小

1 个答案: