Сделайте боковые полосы уменьшающими с max-width на градусы - PullRequest
Новая
       5

Сделайте боковые полосы уменьшающими с max-width на градусы

0 голосов
/ 18 февраля 2020

Как заставить боковые части веб-страницы уменьшать их ширину при уменьшении ширины всей страницы на градусы? 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 10% 80% 10%;
            min-height: 100vh;
        }
        .side-right {
            background: red;
        }
        .side-left {
            background: blue;
        }
        .main {
            background: green;
        }
        @media screen and (max-width: 1000px) {
            .container {
                grid-template-columns: 0 100% 0;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="side-right">
    </div>
    <div class="main">
    </div>
    <div class="side-left">
    </div>
</div>
</body>
</html>

В примере ниже, после max-width = 1000px боковые элементы исчезают мгновенно, но я хочу чтобы уменьшить их ширину, реагируя на каждый пиксель, измененный на max-width. Как это сделать?

Ответы [ 3 ]

1 голос
/ 18 февраля 2020

Вы можете анимировать все с помощью flex-box и просто изменив некоторые из ваших css. 

.container {
  display: flex;
  min-height: 100vh;
  flex-direction: row-reverse;
}
.side-right {
  background: red;
  width: 100%;
}
.side-left {
  background: blue;
  width: 100%;
}
.main {
  background: green;
  min-width: 600px;
}

Это всего лишь базовый c пример. Вы можете прочитать больше о flex-box.

1 голос
/ 19 февраля 2020

Если я правильно понимаю ваше требование ... измените начальный grid-template-columns на 

  grid-template-columns: 1fr minmax(1000px, 8fr) 1fr;


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

.container {
  display: grid;
  grid-template-columns: 1fr minmax(1000px, 8fr) 1fr;
  min-height: 100vh;
}

.side-right {
  background: red;
}

.side-left {
  background: blue;
}

.main {
  background: green;
}

@media screen and (max-width: 1000px) {
  .container {
    grid-template-columns: 0 1fr 0;
  }
}
<div class="container">
  <div class="side-right">
  </div>
  <div class="main">
  </div>
  <div class="side-left">
  </div>
</div>
0 голосов
/ 18 февраля 2020

Попытайтесь добавить min-with: 50px; к .side-right и .side-left И затем дайте им обоим z-index: 1; Так они не будут лежать под вашим основным

Надеюсь, что поможет

...