Макет калькулятора нестабилен при различной ширине - PullRequest
Новая
       12

Макет калькулятора нестабилен при различной ширине

0 голосов
/ 31 мая 2019

Когда я сжимаю веб-страницу для проверки адаптивного поведения, макет все перемешивается.

Преобразовал отступы из пикселей в 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>

Я хочу, чтобы макет был жестким и масштабировался вместе с размером браузера, то есть относительные положения этих элементов должны оставаться неизменными.

Ответы [ 2 ]

1 голос
/ 31 мая 2019

Удалите горизонтальный отступ от padding: 3.125rem; из вашего CSS. Происходит следующее: когда вы сжимаете свой браузер, вы в конечном итоге достигнете точки, когда отступы не позволят контейнеру больше сжиматься. 

.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>
0 голосов
/ 31 мая 2019

padding, который вы установили на кнопках, не позволяет браузеру сделать элементы достаточно маленькими, чтобы поместиться в строках. Удалите эту строку, и она должна работать намного лучше. Вам не нужно заполнять, потому что ваш макет контролируется с помощью flex.

...