Question

当我收缩网页以检查响应行为时，布局全乱了。

将填充从像素转换为rem 字体大小从像素转换为大众

.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>

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

Answer 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>

Answer 2

您在按钮上设置的padding使浏览器无法将元素缩小到足以容纳行的大小。删除该行，它应该会更好。您不需要填充，因为您的布局是由flex控制的。

宽度变化时计算器布局不稳定

2 个答案: