文章/答案/技术大牛

发布

社区首页 >问答首页 >在不同的移动屏幕中缩放网格

问在不同的移动屏幕中缩放网格
EN

Stack Overflow用户

提问于 2018-12-05 22:10:09

回答 1查看 28关注 0票数 1

我正在创建UI (标题、网格和按钮)，并希望在每个移动屏幕上都是相同的。下面是来自不同手机屏幕的截图：

三星S5

像素2 XL

Ipad

我想让在Pixel 2 XL和Ipad上进行缩放，就像在三星S5中一样，也就是说，在这两张屏幕截图中，除了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;
      }
    }

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-12-05 22:31:13

给你的.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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53641519

复制

相似问题

问在不同的移动屏幕中缩放网格
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在不同的移动屏幕中缩放网格EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在不同的移动屏幕中缩放网格
EN