计算器布局随着宽度的变化而不稳定答案

【问题标题】：Calculator layout not staying stable with varying width计算器布局随着宽度的变化而不稳定
【发布时间】：2019-05-31 16:03:48
【问题描述】：

当我缩小网页以检查响应行为时，布局完全混乱。

将内边距从像素转换为 rem 将字体大小从像素转换为 VW

.main-class{
}
.calculator-begin{
  align-items: center;
  margin-top: 3.125rem;
  margin-bottom: 3.125rem;
}

.row{
  width: 50%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.screen{
  font: monospace;
  font-size: 2.778vw;
  flex-basis: 100%;
  padding: 3.125rem;
   text-align: right;
   color: white;
   background-color: black;
}

.cancel{
  background-color: #bababa;
  font-size: 2.778vw;
  flex-basis: 50%;
  padding: 3.125rem;
   text-align: center;
   border: 1.5px solid black;
}
.cancel:active{
  background: #a0a0a0;
}
.numbers{
  padding: 3.125rem;
  font-size: 2.778vw;
  flex-basis: 25%;
  text-align: center;
  background-color:  #bababa;
  border: 1.5px solid black;
}
.numbers:active{
  background: #a0a0a0;
}
.operations{
  padding: 3.125rem;
  font-size: 2.778vw;
  flex-basis: 25%;
  text-align: center;
  background-color:  #ffa642;
  border: 1.5px solid black;
}
.operations:active{
  background-color: #ff8905;
}
.zero{
  padding: 3.125rem;
  flex-basis: 75%;
  font-size: 2.778vw;
  text-align: center;
  background-color:   #bababa;
  border: 1.5px solid black;
}
.zero:active{
  background: #a0a0a0;
}

.remove-left-border{
  border-left: 0px;
}

.remove-right-border{
  border-right: 0px;
}

.remote-bot-border{
  border-bottom: 0px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="calculatorStyle.css">
    <title>Calculator using JS</title>
  </head>
  <body>
    <div class="main-class">
      <center>
      <div class="calculator-begin">
        <div class="row">
         <div class="screen">
           <section>
             XXXXX
           </section>
         </div>
        </div>
        <div class="row">
          <button class="cancel remove-left-border">C</button>
          <button class="numbers">←</button>
          <button class="operations remove-right-border">÷</button>
        </div>
        <div class="row">
          <button class="numbers remove-left-border">7</button>
          <button class="numbers">8</button>
          <button class="numbers">9</button>
          <button class="operations remove-right-border">X</button>
        </div>
        <div class="row">
          <button class="numbers remove-left-border">4</button>
          <button class="numbers">5</button>
          <button class="numbers">6</button>
          <button class="operations remove-right-border">-</button>
        </div>
        <div class="row">
          <button class="numbers remove-left-border">1</button>
          <button class="numbers">2</button>
          <button class="numbers">3</button>
          <button class="operations remove-right-border">+</button>
        </div>
        <div class="row">
          <button class="zero remove-left-border remove-bottom-border">0</button>
          <button class="operations remove-right-border remove-bottom-border">=</button>
        </div>
      </div>
      </center>
    </div>
  </body>
</html>

我希望布局是刚性的，并随着浏览器大小而缩放，也就是说，这些元素的相对位置应该保持不变。

【问题讨论】：

标签： html css responsive-design responsive

【解决方案1】：

从 CSS 中删除 padding: 3.125rem; 的水平填充。实际发生的情况是，当您缩小浏览器时，您最终会达到填充不允许容器再缩小的程度。

.main-class{
}
.calculator-begin{
  align-items: center;
  margin-top: 3.125rem;
  margin-bottom: 3.125rem;
}

.row{
  width: 50%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.screen{
  font: monospace;
  font-size: 2.778vw;
  flex-basis: 100%;
  padding: 3.125rem;
   text-align: right;
   color: white;
   background-color: black;
}

.cancel{
  background-color: #bababa;
  font-size: 2.778vw;
  flex-basis: 50%;
  padding: 3.125rem 0;
   text-align: center;
   border: 1.5px solid black;
}
.cancel:active{
  background: #a0a0a0;
}
.numbers{
  padding: 3.125rem 0;
  font-size: 2.778vw;
  flex-basis: 25%;
  text-align: center;
  background-color:  #bababa;
  border: 1.5px solid black;
}
.numbers:active{
  background: #a0a0a0;
}
.operations{
  padding: 3.125rem 0;
  font-size: 2.778vw;
  flex-basis: 25%;
  text-align: center;
  background-color:  #ffa642;
  border: 1.5px solid black;
}
.operations:active{
  background-color: #ff8905;
}
.zero{
  padding: 3.125rem 0;
  flex-basis: 75%;
  font-size: 2.778vw;
  text-align: center;
  background-color:   #bababa;
  border: 1.5px solid black;
}
.zero:active{
  background: #a0a0a0;
}

.remove-left-border{
  border-left: 0px;
}

.remove-right-border{
  border-right: 0px;
}

.remote-bot-border{
  border-bottom: 0px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="calculatorStyle.css">
    <title>Calculator using JS</title>
  </head>
  <body>
    <div class="main-class">
      <center>
      <div class="calculator-begin">
        <div class="row">
         <div class="screen">
           <section>
             XXXXX
           </section>
         </div>
        </div>
        <div class="row">
          <button class="cancel remove-left-border">C</button>
          <button class="numbers">←</button>
          <button class="operations remove-right-border">÷</button>
        </div>
        <div class="row">
          <button class="numbers remove-left-border">7</button>
          <button class="numbers">8</button>
          <button class="numbers">9</button>
          <button class="operations remove-right-border">X</button>
        </div>
        <div class="row">
          <button class="numbers remove-left-border">4</button>
          <button class="numbers">5</button>
          <button class="numbers">6</button>
          <button class="operations remove-right-border">-</button>
        </div>
        <div class="row">
          <button class="numbers remove-left-border">1</button>
          <button class="numbers">2</button>
          <button class="numbers">3</button>
          <button class="operations remove-right-border">+</button>
        </div>
        <div class="row">
          <button class="zero remove-left-border remove-bottom-border">0</button>
          <button class="operations remove-right-border remove-bottom-border">=</button>
        </div>
      </div>
      </center>
    </div>
  </body>

【讨论】：

【解决方案2】：

您在按钮上设置的padding 使浏览器无法使元素小到足以放入行中。删除那条线，它应该工作得更好。您不需要填充，因为您的布局由 flex 控制。

【讨论】：

同意这一点，但我认为只有水平填充是修复所必需的。