css - 使用 CSS 进行流体布局

Question

我有一个页面，有 10 个 div 作为大按钮，显示在 2 行，每行 5 个，但我希望这样，如果页面调整大小或在屏幕较小的设备上打开，布局按钮会自动更改，但我不确定该怎么做。

我应该从哪里开始寻找，或者有人知道可以帮助我实现这一目标的任何好的教程吗？

谢谢

Answer 1

它的名称是响应式(或响应式)设计。你可以在这里找到一个不错的介绍:http://netuncovered.com/2011/05/reactive-web-design/

这一切都归结为 CSS 中的 @media 查询，以确定您正在处理的窗口的大小，并相应地更改样式。像这样的东西:

@media screen and (min-width:768px)
{
    .my_div { width: 200px; }
}
@media screen and (min-width:1024px)
{
    .my_div { width: 300px; }
}

此示例根据窗口大小为您提供不同大小的 div。您可以使用@media 查询根据屏幕大小执行相同的定位或任何其他 CSS 规则。

对于如何更改一行中的元素数这一具体问题，假设您有以下 HTML:

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="clear3"></div>
<div class="item"></div>
<div class="item"></div>
<div class="clear5"></div>
<div class="item"></div>
<div class="clear3"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="clear3"></div>
<div class="item"></div>

根据视口(viewport)的大小，您可以指定 .clear3 或 .clear5 类何时实际清除 float 。像这样的东西:

.item { float: left; width: 200px; }
@media screen and (min-width:768px)
{
    .clear3 { clear: both; }
    .clear5 { clear: none; }
}
@media screen and (min-width:1024px)
{
    .clear3 { clear: none; }
    .clear5 { clear: both; }
}

这将根据屏幕大小更改每行 .item div 的 div 数量。我认为。我没有真正测试它。