Question

我正在创建UI（标题，网格和按钮），并且希望每个移动屏幕上的UI都一样。这些是目前来自不同移动屏幕的屏幕截图：

我希望像 Samsung S5 中那样缩放 Pixel 2 XL 和 Ipad 中的网格 >，即在这两个屏幕截图中，Exit按钮后有相当数量的空白。

我希望这些按钮在屏幕底部，标题-在顶部，其余部分由网格覆盖。

我感觉我在分配height网格时做错了-如果我将其设置得更高，则按钮将不在Samsung S5中。有人可以帮我吗？

代码：

HTML：

<div className="component">
      <div className="header">
        <h3 className="header-title">
          Let&apos;s play!
        </h3>
        <div>
          Click the tiles!
        </div>
      </div>
      <div className="grid">
        <div className="box"><div className="inner">1</div></div>
        <div className="box"><div className="inner">2</div></div>
        <div className="box"><div className="inner">3</div></div>
        <div className="box"><div className="inner">4</div></div>
        <div className="box"><div className="inner">5</div></div>
        <div className="box"><div className="inner">6</div></div>
      </div>
      <div className="buttonAndInput">
        <div className="button">
          <button
            className="primary button-continue">
            Start the Game
          </button>
        </div>
        <div className="link">
          <a
            className="link-text">
            Exit
          </a>
        </div>
      </div>
    </div>

CSS：

   .component {
     width: 100%;
     height: 100%;
     background-color: white;
     text-align: center;
   }

   .header {
     margin: 1rem 0;
     height: 10%;
   }

   .grid {
     margin: 0 auto;
     width: 90%;
     height: 70%;
     display: flex;
     flex-wrap: wrap;
   }


   .box {
      width: 44%;
      margin: 5px;
      color: black;
      font-weight: bold;
      flex: 1 0 auto;
      position: relative;
      border: 1px solid #d2d2d2;
      border-radius: 5px;
      background: white;
      cursor: pointer;
      text-align: center;
    }

    .box .inner {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .buttonAndInput {
      width: 100%;
      height: 20%;
      margin-top: 0.5rem;
      background-color: white;
      animation-fill-mode: backwards;
    }

    .input-text {
      width: 100%;
      height: 35px;
      font-size: 0.833rem;
      padding: 0 1rem;
      border-radius: 5px;
      border: 1px solid #d2d2d2;
      -webkit-appearance: none;
      -moz-appearance: none;
    }

    .button {
      margin-top: 0.5rem;

      &-continue {
        height: 35px;
        width: 250px;
        padding: 0 !important;
      }
    }

    .link {
      margin-top: 0.5rem;

      a {
        text-align: center;
      }
    }

Answer 1

给您的.component一个height: 100vh并弯曲每个孩子（.header，.grid和.buttonAndInput）

html,
body {
  margin: 0;
}

.component {
  height: 100vh;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.header {
  padding: 1rem 0;
  flex: 1 1 10%;
}

.grid {
  width: 90%;
  margin: 0 auto;
  flex: 1 1 70%;
  display: flex;
  flex-wrap: wrap;
}

.box {
  flex: 1 1 50%;
  position: relative;
  cursor: pointer;
}

.box .inner {
  border-radius: 5px;
  margin: 5px;
  border: 1px solid #d2d2d2;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.buttonAndInput {
  width: 100%;
  flex: 1 1 20%;
  padding-top: 0.5rem;
}

.button {
  margin-top: 0.5rem;
}

.button-continue {
  height: 35px;
  width: 250px;
}

.link {
  margin-top: 0.5rem;
}

.link a {
  text-align: center;
}

<div class="component">
  <div class="header">
    <h3 class="header-title">
      Let&apos;s play!
    </h3>
    <div>
      Click the tiles!
    </div>
  </div>
  <div class="grid">
    <div class="box">
      <div class="inner">1</div>
    </div>
    <div class="box">
      <div class="inner">2</div>
    </div>
    <div class="box">
      <div class="inner">3</div>
    </div>
    <div class="box">
      <div class="inner">4</div>
    </div>
    <div class="box">
      <div class="inner">5</div>
    </div>
    <div class="box">
      <div class="inner">6</div>
    </div>
  </div>
  <div class="buttonAndInput">
    <div class="button">
      <button class="primary button-continue">
            Start the Game
          </button>
    </div>
    <div class="link">
      <a class="link-text">
            Exit
          </a>
    </div>
  </div>
</div>

在不同的移动屏幕上缩放网格

1 个答案: