Html 如何在屏幕重新调整大小时平滑、连续地收缩多个div？

我有一个非常有趣的HTML/responsive web问题：

我有几个

元素具有

内联块

显示属性：

<div id="a"></div>    <div id="b"></div>    <div id="c"></div>

每个元件的最大宽度为200px

当我收缩页面时，所有元素都会按比例收缩，但是我需要的是先给

#a

优先收缩，然后使

#b

收缩，然后使

#c

收缩

---

我该怎么做？有什么想法吗？

在您希望缩小每个阈值的每个阈值处进行媒体查询应该可以做到这一点。以最小宽度开始，并有条件地将其移除：

/* base rule */

#a, #b, #c {
    min-width:200px;
}

/* conditionally shrink */

@media all and (max-width: 768px) {
    #a { min-width:0; }
}
@media all and (max-width: 548px) {
    #b { min-width:0; }
}
@media all and (max-width: 320px) {
    #c { min-width:0; }
}

---

您可以沿着缩小屏幕大小的路径使用媒体查询

例如，你可以从这样的事情开始

@media screen and (max-width: 900px) { #a { width: 100px; } }
@media screen and (max-width: 600px) { #b { width: 100px; } }
@media screen and (max-width: 300px) { #c { width: 100px; } }

。。。并在不同的阈值下复制代码，并对屏幕大小和div宽度进行适当调整

---

更新

感谢您在评论中的澄清。您希望缩小三个div的宽度，每个div按顺序平滑地缩小。这可以通过CSS和的组合来实现

HTML

–

显示：内联块基于您的代码

–<代码>显示：块用于演示目的

注意：使用竖条重新调整窗口大小。确保将窗口一直展开以查看全部效果。
您是否仍在寻找此问题的答案？如果我下面的答案有帮助，请告诉我，否则如果你提供更多细节，我仍然可以帮助你。这确实有帮助，但我还没有尝试过。我最担心的是，当调整大小时，它不会是流动的，而是会在预定义的最大宽度点处跳跃。你想让所有div以所有屏幕大小显示在同一行上吗？是的，但有没有办法平滑地缩放它们？哇@Michael_B这太神奇了。谢谢你的努力！这正是我想要的4。谢谢，我喜欢这个答案，但我担心的是，它在调整大小时不会是流动的，而是会在预定义的最大宽度点跳转。我刚刚注意到您将最小宽度与最大宽度结合使用。您能解释一下吗？媒体查询根据最大宽度规则计算屏幕宽度-因此该规则适用于该宽度以下的每个屏幕宽度。CSS属性使用min width，因为它将宽度限制为至少该宽度。谢谢，我喜欢这个答案，但我担心的是，当调整大小时，它不会是流动的，而是会在预定义的最大宽度点跳跃。
<div id="a">DIV BOX A</div>
<div id="b">DIV BOX B</div>
<div id="c">DIV BOX C</div>

div { display: inline-block; width: 200px; }

div { transition: width .5s ease-in-out, left 1s ease-in-out; }

@media only screen and (max-width: 800px) { #a { width: 150px; } } 
@media only screen and (max-width: 700px) { #b { width: 150px; } } 
@media only screen and (max-width: 600px) { #c { width: 150px; } } 

@media only screen and (max-width: 500px) { #a { width: 100px; } } 
@media only screen and (max-width: 400px) { #b { width: 100px; } } 
@media only screen and (max-width: 300px) { #c { width: 100px; } }