如何阻止我的鍵盤在移動設備上被切斷？

Question

我有一個 wordle 克隆，作為一種學習經驗，我正在嘗試弄清楚為什么我的鍵盤在移動設備的左側被切斷，但可以在右側滾動。 據我所知，設置鍵盤的代碼應該是響應式的。 我的代碼和問題示例如下。

 #keyboard-cont-cont { width: 100vw; overflow: visible; } #keyboard-cont { margin: 1rem 0; left: 50%; top: 50%; padding: 0vw 40vw; display: flex; overflow: auto; flex-direction: column; align-items: center; background: solid lightGray; font-family: monospace; --e: calc(100vw / 35); } #keyboard-cont div { display: flex; overflow: auto; }.center { width: 50%; }.second-row { margin: 0.5rem 0; margin: calc(var(--e) / 2); position: relative; }.keyboard-button { font-size: var(--e); font-weight: 700; padding: calc(var(--e) / 2); margin: 0 2px; cursor: pointer; text-transform: uppercase; }.center { width: 50%; }.first-row { position: relative; overflow: auto; }.second-row { margin: 0.5rem 0; position: relative; overflow: auto; }.third-row { position: relative; overflow: auto; }.keyboard-button { font-size: 1rem; font-weight: 700; padding: 0.5rem; margin: 0 2px; cursor: pointer; text-transform: uppercase; }

 <div id="keyboard-cont-cont"> <div id="keyboard-cont"> <div class="first-row"> <button class="keyboard-button">q</button> <button class="keyboard-button">w</button> <button class="keyboard-button">e</button> <button class="keyboard-button">r</button> <button class="keyboard-button">t</button> <button class="keyboard-button">y</button> <button class="keyboard-button">u</button> <button class="keyboard-button">i</button> <button class="keyboard-button">o</button> <button class="keyboard-button">p</button> </div> <div class="second-row"> <button class="keyboard-button">a</button> <button class="keyboard-button">s</button> <button class="keyboard-button">d</button> <button class="keyboard-button">f</button> <button class="keyboard-button">g</button> <button class="keyboard-button">h</button> <button class="keyboard-button">j</button> <button class="keyboard-button">k</button> <button class="keyboard-button">l</button> </div> <div class="third-row"> <button class="keyboard-button">Del</button> <button class="keyboard-button">z</button> <button class="keyboard-button">x</button> <button class="keyboard-button">c</button> <button class="keyboard-button">v</button> <button class="keyboard-button">b</button> <button class="keyboard-button">n</button> <button class="keyboard-button">m</button> <button class="keyboard-button">Enter</button> </div> </div> </div>

index.html

<div id="keyboard-cont-cont">
  <div id="keyboard-cont">
      <div class="first-row">
          <button class="keyboard-button">q</button>
          <button class="keyboard-button">w</button>
          <button class="keyboard-button">e</button>
          <button class="keyboard-button">r</button>
          <button class="keyboard-button">t</button>
          <button class="keyboard-button">y</button>
          <button class="keyboard-button">u</button>
          <button class="keyboard-button">i</button>
          <button class="keyboard-button">o</button>
          <button class="keyboard-button">p</button>
      </div>
      <div class="second-row">
          <button class="keyboard-button">a</button>
          <button class="keyboard-button">s</button>
          <button class="keyboard-button">d</button>
          <button class="keyboard-button">f</button>
          <button class="keyboard-button">g</button>
          <button class="keyboard-button">h</button>
          <button class="keyboard-button">j</button>
          <button class="keyboard-button">k</button>
          <button class="keyboard-button">l</button>
      </div>
      <div class="third-row">
          <button class="keyboard-button">Del</button>
          <button class="keyboard-button">z</button>
          <button class="keyboard-button">x</button>
          <button class="keyboard-button">c</button>
          <button class="keyboard-button">v</button>
          <button class="keyboard-button">b</button>
          <button class="keyboard-button">n</button>
          <button class="keyboard-button">m</button>
          <button class="keyboard-button">Enter</button>
      </div>
  </div>
</div>

樣式.css

keyboard-cont-cont {
  width: 100vw;
  overflow: visible;
}

keyboard-cont {
  margin: 1rem 0;
  left: 50%;
  top: 50%;
  padding: 0vw 40vw;
  display: flex;
  overflow: auto;
  flex-direction: column;
  align-items: center;
  background: solid lightGray;
  font-family: monospace;
  --e: calc(100vw / 35);
}

keyboard-cont div {
  display: flex;
  overflow: auto;
}

.center {
  width: 50%;
}

.second-row {
  margin: 0.5rem 0;
  margin: calc(var(--e) / 2);
  position: relative;
}

.keyboard-button {
  font-size: var(--e);
  font-weight: 700;
  padding: calc(var(--e) / 2);
  margin: 0 2px;
  cursor: pointer;
  text-transform: uppercase;
}

.center {
  width: 50%;
}

.first-row {
  position: relative;
  overflow: auto;
}

.second-row {
  margin: 0.5rem 0;
  position: relative;
  overflow: auto;
}

.third-row {
  position: relative;
  overflow: auto;
}

.keyboard-button {
  font-size: 1rem;
  font-weight: 700;
  padding: 0.5rem;
  margin: 0 2px;
  cursor: pointer;
  text-transform: uppercase;
}

帶媒體查詢的移動設備 帶媒體查詢的桌面

Answer 1

您可以使用媒體查詢使其根據屏幕尺寸做出響應。

 #keyboard-cont-cont { width: 100vw; overflow: visible; } #keyboard-cont { margin: 1rem 0; left: 50%; top: 50%; padding: 0vw 40vw; display: flex; overflow: auto; flex-direction: column; align-items: center; background: solid lightGray; font-family: monospace; --e: calc(100vw / 35); } #keyboard-cont div { display: flex; overflow: auto; }.center { width: 50%; }.second-row { margin: 0.5rem 0; margin: calc(var(--e) / 2); position: relative; }.keyboard-button { font-size: var(--e); font-weight: 700; padding: calc(var(--e) / 2); margin: 0 2px; cursor: pointer; text-transform: uppercase; }.center { width: 50%; }.first-row { position: relative; overflow: auto; }.second-row { margin: 0.5rem 0; position: relative; overflow: auto; }.third-row { position: relative; overflow: auto; }.keyboard-button { font-size: 1rem; font-weight: 700; padding: 0.5rem; margin: 0 2px; cursor: pointer; text-transform: uppercase; } @media screen and (max-width: 450px) {.keyboard-button{ font-size: 1rem; font-weight: 600; padding: 0.1rem; } } @media not all and (min-resolution:450px) { @supports (-webkit-appearance:none) {.keyboard-button { font-size: 1rem; font-weight: 600; padding: 0.1rem; } }}

 <div id="keyboard-cont-cont"> <div id="keyboard-cont"> <div class="first-row"> <button class="keyboard-button">q</button> <button class="keyboard-button">w</button> <button class="keyboard-button">e</button> <button class="keyboard-button">r</button> <button class="keyboard-button">t</button> <button class="keyboard-button">y</button> <button class="keyboard-button">u</button> <button class="keyboard-button">i</button> <button class="keyboard-button">o</button> <button class="keyboard-button">p</button> </div> <div class="second-row"> <button class="keyboard-button">a</button> <button class="keyboard-button">s</button> <button class="keyboard-button">d</button> <button class="keyboard-button">f</button> <button class="keyboard-button">g</button> <button class="keyboard-button">h</button> <button class="keyboard-button">j</button> <button class="keyboard-button">k</button> <button class="keyboard-button">l</button> </div> <div class="third-row"> <button class="keyboard-button">Del</button> <button class="keyboard-button">z</button> <button class="keyboard-button">x</button> <button class="keyboard-button">c</button> <button class="keyboard-button">v</button> <button class="keyboard-button">b</button> <button class="keyboard-button">n</button> <button class="keyboard-button">m</button> <button class="keyboard-button">Enter</button> </div> </div> </div>