Сохранение соотношений в адаптивном меню - PullRequest
Новая
       7

Сохранение соотношений в адаптивном меню

0 голосов
/ 24 апреля 2018

Я пытаюсь создать адаптивное меню с плитками.

  • В зависимости от содержимого может содержать до 8 плиток .
  • Это изменит форму в определенных точках останова. На 8 плитках он начинается с 4x2 на маленьких экранах, изменяется на 1x8 на средних и заканчивается на 2x4 на больших.
  • Каждая плитка должна иметь ширину 150px и высоту 105px с небольшим желобом между ними (в этом примере 2px). На экранах, где такие размеры больше не помещаются, они должны уменьшаться пропорционально , сохраняя структуру макета ( 4x2 ).

Приведенный ниже пример успешно работает в меню, и его плитки начинают уменьшаться (по ширине), когда область просмотра становится слишком узкой, но не удается пропорционально уменьшить плитки. Я попытался поиграться с ширина , максимальная ширина , высота , максимальная высота на всех слоях, высота: авто; свойство. Ничего не сработало.

Я основал меню на свойстве wax flexbox , потому что оно позволяет мне изменять компоновку сетки в точках останова, не ставя под угрозу структуру HTML, и я хочу избежать использования сетки CSS из-за недостаточной поддержки браузера.

Важное замечание: Разверните отсканированный до полного экрана, чтобы увидеть эффект сжатия. 

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.tile-group {
  background-color: antiquewhite;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 608px;
}

.tile-padding {
  width: 152px;
  height: 107px;
  padding: 1px;
  max-width: 25%;
}

.tile {
  background-color: antiquewhite;
  width: 100%;
  height: 100%;
}

.tile-color-1 {
  background-color: red;
}

.tile-color-2 {
  background-color: blue;
}

.tile-color-3 {
  background-color: green;
}

.tile-color-4 {
  background-color: yellow;
}

.tile-color-5 {
  background-color: indianred;
}

.tile-color-6 {
  background-color: skyblue;
}

.tile-color-7 {
  background-color: darkseagreen;
}

.tile-color-8 {
  background-color: greenyellow;
}
<div class="tile-group">
  <div class="tile-padding">
    <div class="tile tile-color-1"></div>
  </div>
  <div class="tile-padding">
    <div class="tile tile-color-2"></div>
  </div>
  <div class="tile-padding">
    <div class="tile tile-color-3"></div>
  </div>
  <div class="tile-padding">
    <div class="tile tile-color-4"></div>
  </div>
  <div class="tile-padding">
    <div class="tile tile-color-5"></div>
  </div>
  <div class="tile-padding">
    <div class="tile tile-color-6"></div>
  </div>
  <div class="tile-padding">
    <div class="tile tile-color-7"></div>
  </div>
  <div class="tile-padding">
    <div class="tile tile-color-8"></div>
  </div>
</div>

1 Ответ

0 голосов
/ 26 апреля 2018

После (слишком) большого количества исследований самым элегантным способом решения этой проблемы было использование метода, описанного в принятом ответе от этого поста .

...