<div> 和 <button> 在较低分辨率下的问题

Question

我正在制作一个基于文本的角色扮演游戏，一切正常，但是当我的按钮中有很多文本时，在较低的分辨率下（iphone 5、5se 例如），我的按钮被推出框 (div)。

有什么想法吗？

HTML:

<div class="container">
  <div id="text">Text</div>
  <div id="option-buttons" class="btn-grid">
    <button type="button" class="btn"> Option 1</button>
    <button type="button" class="btn"> Option 1</button>
    <button type="button" class="btn"> Option 1</button>
    <button type="button" class="btn"> Option 1</button>

  </div>
</div>

CSS:

body {
  font-family: 'Roboto Mono', monospace;
  margin: 0;
  padding: 0;
  display:flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: #474a56;
}

.container{
  border-radius: 10px;
  width: 950px;
  max-width: 80%;
  background-color: white;
  padding: 2%;
  box-shadow: 0 0 10px 2px;
  text-align: center;
}

.btn-grid{
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 18px;
  margin-top: 2rem;
}

.btn{
  font-family: 'Roboto mono', monospace;
  color: white;
  background-color: #474a56;
  border: 1px solid #d3d5fd;
  border-radius: 3.8px;
  padding: 10px 20px;
  outline: none;
  font-size: 1.1rem;
}

Answer 1

我假设这是字体大小的问题：在这种情况下，我们可以使用 CSS 媒体查询（它可以根据某些因素动态调整属性）。

对于您的情况，我们可以这样做：

@media only screen and (max-width: 720px) { /* Screens smaller than 720px */
    div, button {
        font-size: 0.7rem;
        padding: 5px;

        ...

        foo: bar;
    }
}

@media only screen and (max-width: 480px) {
    .foo {
        ...
    }

    #bar {
        ...
    }
}

（确保将此代码放在底部，从最大屏幕到最小屏幕，以便级联覆盖。）

补充说明

如果满足条件，媒体查询将有效地充当更多样式的容器。我喜欢将其视为内联 HTML <style> 标签。

Here's the W3 spec and here 的一些 W3schools 示例。

Answer 2

从您的 .container class 中删除 max-width。

body {
  font-family: 'Roboto Mono', monospace;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: #474a56;
}

.container {
  border-radius: 10px;
  width: 950px;
  background-color: white;
  padding: 2%;
  box-shadow: 0 0 10px 2px;
  text-align: center;
}

.btn-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 18px;
  margin-top: 2rem;
}

.btn {
  font-family: 'Roboto mono', monospace;
  color: white;
  background-color: #474a56;
  border: 1px solid #d3d5fd;
  border-radius: 3.8px;
  padding: 10px 20px;
  outline: none;
  font-size: 1.1rem;
}

<div class="container">
  <div id="text">Text</div>
  <div id="option-buttons" class="btn-grid">
    <button type="button" class="btn"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam et porro a fuga, totam, quidem quibusdam dolores iste illum ipsam quia autem alias error, eaque dicta numquam nulla debitis quis.</button>
    <button type="button" class="btn"> Option 1</button>
    <button type="button" class="btn"> Option 1</button>
    <button type="button" class="btn"> Option 1</button>

  </div>
</div>

<div> 和 <button> 在较低分辨率下的问题

Problem with a <div> and <button> on lower resolutions

html

css

responsive-design