CSS 响应式:先缩小一些 div,然后再缩小其他的,依此类推
CSS responsive: shrink some divs first, then others, etc
当屏幕宽度缩小时,我想设置一个优先顺序,先缩小、第二缩小、第三缩小等等?
例如我在一行中有 "buildings"(table 或弹性框),每对之间有 "gaps",最左边和最右边有一个自动边距。
随着屏幕宽度的缩小:
1. 首先,将边距宽度减小到 0。
2. 然后,将 "gap" 宽度从 125px 减小到 30px。
3. 然后,开始将 "building" 宽度减小到低于首选宽度 (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>
使用 CSS3 media queries 和 max-width
或 min-width
选择器实现响应式设计。
通过这种方式,您可以根据屏幕尺寸对 类 应用不同的样式,从而为 缩小优先级 设置规则。
当屏幕宽度缩小时,我想设置一个优先顺序,先缩小、第二缩小、第三缩小等等?
例如我在一行中有 "buildings"(table 或弹性框),每对之间有 "gaps",最左边和最右边有一个自动边距。
随着屏幕宽度的缩小: 1. 首先,将边距宽度减小到 0。 2. 然后,将 "gap" 宽度从 125px 减小到 30px。 3. 然后,开始将 "building" 宽度减小到低于首选宽度 (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>
使用 CSS3 media queries 和 max-width
或 min-width
选择器实现响应式设计。
通过这种方式,您可以根据屏幕尺寸对 类 应用不同的样式,从而为 缩小优先级 设置规则。