Question

我正在尝试使用磁贴创建响应式菜单。

根据内容，它可能包含最多8个图块。
它会在某些断点处改变形状。在8个图块中，它在小屏幕上以4x2开始，在中等时改为1x8，在大屏幕时以2x4结束。
每个瓷砖需要150px宽和105px高，它们之间有一个小沟（本例中为2px）。在屏幕上，这些尺寸不再适合，它们应按比例缩小，保留布局结构（ 4x2 ）。

下面的示例在菜单中成功，当视口变得太窄时，它的图块开始缩小（widht-wise），但它在按比例缩小图块时失败。我试过在所有的宽度， max-width ， height ， max-height 上摆弄图层， height：auto; 属性。没有任何效果。

我基于 flexbox的wrap属性的菜单，因为它允许我在断点处更改网格布局而不会破坏HTML结构，我想避免使用CSS网格由于浏览器支持不足。

重要提示：将剪裁展开至全屏以观察收缩效果。

＆＃13;

*,
*::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;
}

＆＃13;

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

＆＃13;

Answer 1

经过（太多）研究后，解决此问题的最优雅方法是使用this post中接受的答案中描述的方法。

保留响应式菜单中的比率

1 个答案: