0

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

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

谢谢

4

4 回答 4

2

它的名称是响应式（或响应式）设计。你可以在这里找到一个不错的介绍：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 查询根据屏幕大小执行相同的 w/ 定位或任何其他 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>

您可以根据视口的大小指定 .clear3 或 .clear5 类何时真正清除浮动。就像是：

.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 数。我认为。我并没有真正测试它。

于 2013-01-15T20:18:14.387 回答
2

响应式设计：我就是这样学的——

付费但完全值得： http: //www.codeschool.com/courses/journey-into-mobile

输入 Twiiter Bootstap 响应部分以了解它们的工作方式，我在这方面学到了很多： https ://github.com/twitter/bootstrap/blob/master/less/responsive-768px-979px.less

您需要熟悉媒体查询：

https://developer.mozilla.org/en-US/docs/CSS/@media

有响应页面大小的最小宽度和最大宽度助手。

于 2013-01-15T20:19:41.830 回答
2

关于如何开始响应式设计的优秀文章：

http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/

于 2013-01-15T20:27:45.470 回答
1

这可以在没有任何媒体查询的情况下完成 

<div id="wrapper">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
</div>

CSS：

#wrapper { max-width: 750px; overflow: hidden; border: 1px solid #000; margin: 50px auto; }
#wrapper div { width: 150px; height: 150px; float: left; }
于 2013-01-15T20:31:50.723 回答