0

我几乎完成了构建我的 simon 游戏克隆的骨架，我唯一想做的就是将容器（包含游戏本身）设置为最大高度为 605 像素。

当它在视口中达到某个阈值时，我能够实现它的最大宽度，但是我很难应用相同的行为，而是水平地应用。

任何输入将不胜感激。

我也在 CodePen 中附加了我的代码：

http://codepen.io/neotriz/pen/RRxOJb

body {
  background: skyblue;
  font-family: 'Righteous', cursive;
  box-sizing: border-box; }

.container {
  width: 100%;
  display: flex;
  flex-wrap: wrap; }

.game {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 70vh;
  margin-top: 10px; }

.button {
  position: relative;
  display: block;
  height: 50%;
  width: 50%;
  margin-bottom: 1px; }

#green {
  background: #39d565;
  border-top-left-radius: 25%;
  box-shadow: 0 6px 0 #0d934b;
  bottom: 6px;
  transition: all 0.1s linear; }
  #green:active {
    bottom: 0px;
    box-shadow: 0px 0px 0px #0d934b; }

#red {
  background: #d23a51;
  border-top-right-radius: 25%;
  box-shadow: 0 6px 0 #711515;
  bottom: 6px;
  transition: all 0.1s linear; }
  #red:active {
    bottom: 0px;
    box-shadow: 0px 0px 0px #711515; }

#blue {
  background: #09f;
  border-bottom-left-radius: 25%;
  box-shadow: 0 6px 0 #06c;
  bottom: 6px;
  transition: all 0.1s linear; }
  #blue:active {
    bottom: 0px;
    box-shadow: 0px 0px 0px #06c; }

#yellow {
  background: #FD9A01;
  border-bottom-right-radius: 25%;
  box-shadow: 0 6px 0 #916828;
  bottom: 6px;
  transition: all 0.1s linear; }
  #yellow:active {
    bottom: 0px;
    box-shadow: 0px 0px 0px #916828; }

.score {
  width: 100%;
  height: 10vh;
  text-align: center;
  color: #FFF;
  text-shadow: 1px 3px 2px black;
  margin-bottom: 5px; }

.control-panel {
  text-align: center;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  height: 15vh;
  align-items: center;
  justify-content: center;
  background: #aaaaaa;
  border-radius: 10px; }
  .control-panel #on-off-btn {
    width: 33.3333%; }
  .control-panel #level {
    width: 33.3333%; }
  .control-panel #start {
    width: 33.3333%; }
  .control-panel p {
    margin: 8px 0px 0px 0px; }

.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden; }

.cmn-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none; }

input.cmn-toggle-round + label {
  padding: 2px;
  max-width: 90%;
  height: 35px;
  background-color: #dddddd;
  border-radius: 60px;
  margin-top: 9px;
  margin-left: 5px; }

input.cmn-toggle-round + label:before,
input.cmn-toggle-round + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: ""; }

input.cmn-toggle-round + label:before {
  right: 1px;
  background-color: white;
  border-radius: 60px;
  transition: background 0.4s; }

input.cmn-toggle-round + label:after {
  width: 38px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: margin-left 0.4s; }

input.cmn-toggle-round:checked + label:before {
  background-color: #8ce196; }

input.cmn-toggle-round:checked + label:after {
  margin-left: 58%; }

.btn-round {
  width: 50%;
  height: 50px;
  background: #ed2914;
  border-radius: 100%;
  outline: none;
  box-shadow: 0 6px 0 #711515;
  bottom: 6px;
  transition: all 0.1s linear; }
  .btn-round:active {
    bottom: 0px;
    box-shadow: 0px 0px 0px #711515; }

@media screen and (max-width: 311px) {
  input.cmn-toggle-round:checked + label:after {
    margin-left: 45%; } }

@media screen and (min-width: 426px) {
  .container {
    width: 426px;
    margin-left: auto;
    margin-right: auto; }
  input.cmn-toggle-round:checked + label:after {
    margin-left: 66%; } }

@media screen and (min-height: 605px) {
  .container {
    height: 605px; } }
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Simon Game FCC</title>
  </head>
  <body>
    <div class="container">
      <div class="game">
        <div id="green" class="button"></div>
        <div id="red" class="button"></div>
        <div id="blue" class="button"></div>
        <div id="yellow" class="button"></div>
      </div>
      <div class="score">
        <h2>Score: 0 </h2>
      </div>
      <div class="control-panel">
        <div id="on-off-btn">
          <input id="on-off-slider"type="checkbox" class="cmn-toggle cmn-toggle-round">
          <label for="on-off-slider"></label>
          <p>Off/On</p>
        </div>
        <div id="level">
          <input id="level-slider"type="checkbox" class="cmn-toggle cmn-toggle-round">
          <label for="level-slider"></label>
          <p>Level</p>
        </div>
        <div id="start">
          <button class="btn-round"></button>
          <p>(re)Start</p>
        </div>
      </div>
    </div>
  </body>
</html>

4

1 回答 1

0

我认为混合vh高度和flex配置是问题的一部分，因为它使代码调整起来有点棘手。所以我建议删除vh容器内的所有高度，并用flex垂直定位替换它们。

这是我得到的 sccs（这里只有更改的规则）：

.container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
  flex-direction: column;
  justify-content: center; }

.game {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 10px;
  flex: 1 1 auto; }

.score {
  width: 100%;
  text-align: center;
  color: #FFF;
  text-shadow: 1px 3px 2px black;
  margin-bottom: 5px;
  flex: 0 0 auto; }

.control-panel {
  text-align: center;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  align-items: center;
  justify-content: center;
  background: #aaaaaa;
  border-radius: 10px;
  flex: 0 0 auto; }
于 2016-07-17T09:23:45.853 回答