CSS响应：首先缩小一些div，然后缩小其他等等

Question

当屏幕宽度减小时，我想设置一个优先顺序，其中div会缩小第一，第二，第三等等。

E.g。我有“建筑物”连续（桌子或弹性框），每对之间有“间隙”，最左边和最右边有一个自动边距。

随着屏幕宽度缩小： 1.首先，将边距宽度减少到0。 2.然后，将“间隙”宽度从125px减小到30px。 3.只有这样，开始减少“建筑”宽度低于首选宽度（125px）

我认为设置min-width：125px和max-width：30px可以做到这一点，但是没有。

body {
margin: 0;
padding: 0;
}

.holder {
	display: table;
	background-color: pink;
	margin: auto;
}
.top {
	display: table-row;
	width: 100%;
	background-color: blue;
}
.bottom {
	display: table-row;
	background-color: rgb(100,100,100);
}
.top_buildings {
	display: table;
	width: 100%;
}
.building {
	display: table-cell;
	background-color: rgb(100,100,100);
	width: 125px;
	height: 30px;
}
.gap {
	display: table-cell;
	width: 125px;
	min-width: 30px;
	background-color: rgb(200,200,200);
}

<div class="holder">
  <div class="top">
    <div class="top_buildings">
      <div class="building">Building A</div>
      <div class="gap"></div>
      <div class="building">Building B</div>
      <div class="gap"></div>
      <div class="building">Building C</div>
      <div class="gap"></div>
      <div class="building">Building D</div>
      <div class="gap"></div>
      <div class="building">Building E</div>
      <div class="gap"></div>
      <div class="building">Building F</div>
    </div>
  </div>
  <div class="bottom">
    bottom
  </div>
</div>
<br>
<div class="holder">
  <div class="top">
    <div class="top_buildings">
      <div class="building">Building A</div>
      <div class="gap"></div>
      <div class="building">Building B</div>
      <div class="gap"></div>
      <div class="building">Building C</div>
    </div>
  </div>
  <div class="bottom">
    bottom
  </div>
</div>
<br>
<div class="holder">
  <div class="top">
    <div class="top_buildings">
      <div class="building">Building A</div>
      <div class="gap"></div>
      <div class="building">Building B</div>
    </div>
  </div>
  <div class="bottom">
    bottom
  </div>
</div>

Answer 1

使用带有max-width或min-width选择器的CSS3 media queries来实现响应式设计。

通过这种方式，您可以根据屏幕大小对类应用不同的样式来设置缩小优先级的规则。