與流體佈局與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; }