与流体布局与CSS

Question

我有一个页面，有10个div作为大按钮显示在5行2行，但我希望它，如果页面调整大小，或者它在屏幕较小的设备上打开按钮的布局自动变化，但我不知道如何去做这件事。

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

谢谢

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查询根据屏幕大小执行相同的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> 

您可以指定，取决于视口的大小，当class .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的数量。我认为。我没有真正测试它。

Answer 2

回应式设计：这是我学会了如何IT-

支付，但是完全值得的： 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

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

Answer 3

关于如何启动响应式设计优秀的文章：

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

Answer 4

这可以在没有任何媒体来完成查询

<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; }