javascript - 使用右浮动元素的响应式网页设计

Question

我知道很多响应式设计使用百分比宽度和绝对定位来适应不同媒体类型的屏幕宽度。但是，如果我们可以利用不常用但高度跨浏览器兼容的 float right css 样式呢？

演示: http://jsfiddle.net/3A89Q/48/

.wrapper { width: 70%; margin: 0 auto; }
div, span { display: block; float: left; position: relative; }
.wrapper > div { width: 60px; }
.b1 { background-color: blue; height: 132px; }
.b2 { background-color: red; height: 88px; }
.b3 { background-color: green; height: 44px; }
.test { background-color: black; max-width: 160px; min-width: 100px; float: right; border: 2px solid black; }
.test div { width: 16px; height: 16px; background-color: yellow; margin: 2px; }


<section class="wrapper">
    <div class="b1"></div>
    <div class="b2"></div>
    <div class="b3"></div>
    <span class="test">
        <div></div>
        <div></div>
        <div></div>
    </span>
</section>

我的想法 是在不使用百分比的情况下将右侧 float 元素缩小到最小宽度。只有当窗口宽度减小时相邻元素限制元素的可用空间的情况下，才会发生这种缩小过程。如果该元素可用的可用空间不受限制，则该元素会将其宽度增加到最大长度。因此，实际上该元素具有最大和最小宽度，用于控制给定的尺寸灵 active 范围。 (注意:在我上面链接的 jsfiddle 演示中，可以通过将结果窗口缩小到较小尺寸来轻松演示此宽度范围。)

此时如果右浮动元素合并到左浮动元素中，它会向下 float 到左浮动元素下方，保持其最大宽度。

我想要的结果 是让这个右边的 float 元素在向下 float 到它的相邻元素下方之前缩小到它的最小尺寸。一旦元素达到其最小尺寸，它将下降到其相邻元素下方，并依次增加其宽度以填充剩余空间直至其最大宽度，并在向右浮动时开始重复适应其可用空间的过程。

我的问题是，仅使用 css/css3 就可以实现我想要的结果吗？如果没有，是否有执行此功能的 JavaScript/jQuery 插件？ 我在上面链接了一个 jsfiddle 演示，以帮助您理解和利用这个想法的解决方案。

感谢您的帮助。

Answer 1

您是否考虑过使用 CSS 媒体标签来针对不同的屏幕尺寸？

这是一个引用链接。

http://webdesignerwall.com/tutorials/css3-media-queries

jQuery 方法是使用调整大小事件处理程序，并使用 jQuery 相应地调整 CSS。这仅适用于调整浏览器窗口大小时。在准备好文档期间，您可以动态计算宽度和高度。

查看此堆栈解决方案 Using jQuery To Get Size of Viewport

这是另一个引用链接

http://api.jquery.com/resize/