我的游戏在移动设备上显示了下面的一些额外空间

发布于 2025-01-24 08:01:08 字数 5150 浏览 1 评论 0原文

我是使用HTML，CSS＆amp;开发了一个游戏。 JavaScript且它在桌面上响应迅速，但是如果我尝试在移动设备上响应它，那么它在底部显示了一些额外的蓝色空间。谁能帮助解决这个问题？

网站是实时在这里

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #001e6c;
  text-align: center;
  width: auto;
}

main {
  background-color: aliceblue;
  width: 40%;
  padding: 2rem 2rem;
  margin: 2rem auto;
  border: solid black;
  border-width: 5px;
}
.welcome-screen {
  height: auto;
}
img {
  width: 90%;
  max-width: 50%;
  margin: 3rem auto;
}

h2 {
  font-family: "Montserrat", sans-serif;
  margin-top: 2.5rem;
}
h3 {
  font-size: 1rem;
}
.event-buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin: 2rem 1rem;
}
button {
  margin: 0.5rem auto;
  padding: 1.8rem;
  color: white;
  background-image: linear-gradient(#001e6c, #035397);
  border-radius: 1rem;
  border: none;
  cursor: pointer;
  font-size: 1.15rem;
  font-family: Sans;
  width: 59%;
}
button:hover {
  box-shadow: 0 1px 0 1px #032322;
}
#button-child {
  background: linear-gradient(#673fd7, #673fd7);
}

/* // User Play area  */

.user-guess {
  font-size: 20px;
  margin-bottom: 2rem;
}

.user-guess input {
  padding: 2rem 4rem;
  border-style: none;
  background-color: transparent;
  margin-top: 2rem;
  font-size: 15px;
}

#guess-result {
  margin: 30px;
  text-align: left;
  margin: 1.2rem auto;
}

#guess-result .attempts {
  font-size: 1.1rem;
  color: red;
}

.info {
  display: flex;
  justify-content: space-between;
  font-family: Montserrat;
  margin-bottom: 2rem;
}

#event-screen {
  height: auto;
  /* margin-top: 50px; */
}

/* // Responsive */

@media (max-width: 480px) {
  body {
    /* width: 10; */
  }
  h2 {
    font-size: 21px;
    margin-top: 1rem;
  }

  main {
    width: 100%;
    border-width: 5px;
    margin: 0;
    height: fit-content;
    height: max-content;
    height: auto;
  }
  img {
    max-width: 67%;
  }
  button {
    width: 82%;
    margin: 0.5rem auto;
    padding: 1rem;
    border-radius: 0.5rem;
    font-size: 1rem;
  }
  .user-guess input {
    padding: 1.2rem 1rem;
    text-align: center;
  }

  h3 {
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 600;
  }
  .info {
    flex-direction: column;
  }

  #guess-result .attempts {
    margin-top: 9px;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&family=Montserrat:ital,wght@0,500;1,500&display=swap"
      rel="stylesheet"
    />
  </head>
  <body onload="randomNumber()">
    <main>
      <!-- Welcome Screen -->
      <section id="welcome-screen">
        <div id="title-image">
          <h2>Guess The Random Number Between 1-100</h2>
          <img src="/images/game.svg" alt="logo" />
        </div>

        <div id="event_guess">
          <h2>Select The Difficulty</h2>
          <div class="event-buttons">
            <button onclick="easyMode()">Easy: 10 Attempts</button>
            <button onclick="hardMode()" id="button-child">
              Hard: 5 Attempts
            </button>
          </div>
        </div>
      </section>

      <!-- Event Screen -->

      <section id="event-screen">
        <div id="even-button">
          <button onclick="startNewGame()" id="event-button">New Game</button>
        </div>
        <div class="user-guess">
          <h2>Your Guess</h2>
          <input
            type="number"
            name="Guess"
            id="guess-number"
            placeholder="Enter your Guess"
            onchange="userData()"
            ;
          />
        </div>

        <div id="guess-result">
          <div class="info">
            <h3>Number of previous attempts</h3>
            <span class="attempts">0</span>
          </div>

          <div class="info">
            <h3>Number of previous guesses</h3>
            <span class="attempts" id="previous">0</span>
          </div>
        </div>
      </section>
    </main>
    <script src="/index.js"></script>
  </body>
</html>

原文

I am developed one Game using HTML ,CSS & JavaScript and it is responsive on Desktop but if I will try to make it responsive on Mobile then it show some extra Blue Color Space at bottom . Can anyone help to tackle this problem?

Website is live here

Problem

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #001e6c;
  text-align: center;
  width: auto;
}

main {
  background-color: aliceblue;
  width: 40%;
  padding: 2rem 2rem;
  margin: 2rem auto;
  border: solid black;
  border-width: 5px;
}
.welcome-screen {
  height: auto;
}
img {
  width: 90%;
  max-width: 50%;
  margin: 3rem auto;
}

h2 {
  font-family: "Montserrat", sans-serif;
  margin-top: 2.5rem;
}
h3 {
  font-size: 1rem;
}
.event-buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin: 2rem 1rem;
}
button {
  margin: 0.5rem auto;
  padding: 1.8rem;
  color: white;
  background-image: linear-gradient(#001e6c, #035397);
  border-radius: 1rem;
  border: none;
  cursor: pointer;
  font-size: 1.15rem;
  font-family: Sans;
  width: 59%;
}
button:hover {
  box-shadow: 0 1px 0 1px #032322;
}
#button-child {
  background: linear-gradient(#673fd7, #673fd7);
}

/* // User Play area  */

.user-guess {
  font-size: 20px;
  margin-bottom: 2rem;
}

.user-guess input {
  padding: 2rem 4rem;
  border-style: none;
  background-color: transparent;
  margin-top: 2rem;
  font-size: 15px;
}

#guess-result {
  margin: 30px;
  text-align: left;
  margin: 1.2rem auto;
}

#guess-result .attempts {
  font-size: 1.1rem;
  color: red;
}

.info {
  display: flex;
  justify-content: space-between;
  font-family: Montserrat;
  margin-bottom: 2rem;
}

#event-screen {
  height: auto;
  /* margin-top: 50px; */
}

/* // Responsive */

@media (max-width: 480px) {
  body {
    /* width: 10; */
  }
  h2 {
    font-size: 21px;
    margin-top: 1rem;
  }

  main {
    width: 100%;
    border-width: 5px;
    margin: 0;
    height: fit-content;
    height: max-content;
    height: auto;
  }
  img {
    max-width: 67%;
  }
  button {
    width: 82%;
    margin: 0.5rem auto;
    padding: 1rem;
    border-radius: 0.5rem;
    font-size: 1rem;
  }
  .user-guess input {
    padding: 1.2rem 1rem;
    text-align: center;
  }

  h3 {
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 600;
  }
  .info {
    flex-direction: column;
  }

  #guess-result .attempts {
    margin-top: 9px;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&family=Montserrat:ital,wght@0,500;1,500&display=swap"
      rel="stylesheet"
    />
  </head>
  <body onload="randomNumber()">
    <main>
      <!-- Welcome Screen -->
      <section id="welcome-screen">
        <div id="title-image">
          <h2>Guess The Random Number Between 1-100</h2>
          <img src="/images/game.svg" alt="logo" />
        </div>

        <div id="event_guess">
          <h2>Select The Difficulty</h2>
          <div class="event-buttons">
            <button onclick="easyMode()">Easy: 10 Attempts</button>
            <button onclick="hardMode()" id="button-child">
              Hard: 5 Attempts
            </button>
          </div>
        </div>
      </section>

      <!-- Event Screen -->

      <section id="event-screen">
        <div id="even-button">
          <button onclick="startNewGame()" id="event-button">New Game</button>
        </div>
        <div class="user-guess">
          <h2>Your Guess</h2>
          <input
            type="number"
            name="Guess"
            id="guess-number"
            placeholder="Enter your Guess"
            onchange="userData()"
            ;
          />
        </div>

        <div id="guess-result">
          <div class="info">
            <h3>Number of previous attempts</h3>
            <span class="attempts">0</span>
          </div>

          <div class="info">
            <h3>Number of previous guesses</h3>
            <span class="attempts" id="previous">0</span>
          </div>
        </div>
      </section>
    </main>
    <script src="/index.js"></script>
  </body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

吃→可爱长大的 2025-01-31 08:01:08

正如@sigurdmazanti所说：

应用高度：100VH; Main

这看起来像：

main {
  background-color: aliceblue;
  width: 40%;
  height: 100vh; /* New line */
  padding: 2rem 2rem;
  margin: 2rem auto;
  border: solid black;
  border-width: 5px;
}

对于width，您使用的是一个百分比容器。对于高度，我们将使用vh，viewport Height，该是相对于窗口大小而不是父容器的。

那应该做〜

As @SigurdMazanti says:

apply height: 100vh; to main

This would look like:

main {
  background-color: aliceblue;
  width: 40%;
  height: 100vh; /* New line */
  padding: 2rem 2rem;
  margin: 2rem auto;
  border: solid black;
  border-width: 5px;
}

For the width, you are using a percentage, which is only relative to the parent container. For the height though, we are going to use vh, viewport height, which is relative to the window size rather than the parent container.

That should do it~

回复收藏 0 原文

~没有更多了~