CSS3中的自適應佈局

我想將我的網站索引頁面轉換爲可調整的。我希望頁面的整個內容可以調整。通過可調節我的意思是，如果有人在新窗口中打開頁面，並嘗試通過用鼠標拖動窗口來調整窗口大小，我的頁面內容也會根據窗口的寬度和高度進行調整。CSS3中的自適應佈局

只使用CSS是否有可能還是我必須使用一些JavaScript呢？

我需要的是像[這裏] [1]

任何幫助或建議將高度appriciated

感謝

來源

2012-09-19 Wearybands

你想要做的是響應式設計

例如，你可以讓你的CSS的目標爲特定色器件：

//General css 


/*MEDIA BETWEEN 300 - 1000PX */ 
@media all and (min-width:300px) and (max-width:1000px) 
{ 


} 

/*MEDIA BETWEEN 621 - 800PX */ 
@media all and (min-width:621px) and (max-width:800px) 
{ 

} 

/*MEDIA BETWEEN 300 - 620PX */ 
@media all and (min-width:300px) and (max-width:620px) 
{ 

}

一些可以幫助的頁面是：

注意：使用EM和％，而不是PX和PT的

來源

2012-09-19 11:21:44 Champ

只需設置上的東西相對寬度，如width: 75%;或width: 60%;代替width: 450px;或width: 650px;。如果您只是需要元素在頁面大小調整時變得更窄/更寬，這將對您有用。
如果你想主要佈局的變化（比如您提供的演示，頂部菜單欄變成了邊欄時窗口變小），你需要一些JavaScript來切換基於窗口的寬度樣式表。希望這給你一些想法！

來源

2012-09-19 10:53:09 Abraham

我沒有任何頂部的菜單欄... – Wearybands

好了，如果你只是想獲得的元素在頁面大小調整時更小或更大，只需設置百分比寬度即可。 – Abraham

我嘗試了我給寬度：59％，我的主要DIV中這一切的謊言，但它沒」工作:( – Wearybands

你所談論的是所謂的「響應式設計」是什麼。一個響應式網站的工作原理是使用百分比而不是像素以及CSS中的「媒體查詢」。

有一個關於一個偉大的文章在這裏： http://www.alistapart.com/articles/responsive-web-design/

來源

2012-09-19 10:55:19 JimmyRare

CSS3中的自適應佈局

回答

相關問題