將網頁內容設置爲默認寬度，但也可調整大小

我試圖做出完全響應的網站，但我需要網頁的默認寬度爲960像素。我的結構如下：將網頁內容設置爲默認寬度，但也可調整大小

<div id="container"> 
<table id="content"> 
all the content is here 
</table> 
</div>

現在我想的表是960像素默認的寬度，但我希望它能夠重新大小爲好，就像它的寬度和高度分別爲汽車及其相對位置。這些都是我現在

#container{ 
margin: 0 auto; 
position: relative; 
} 
#content{ 
width: 960px; 
height: auto; 
box-shadow: 0 0 3px 3px rgba(0,0,0, 0.7); 
-webkit-box-shadow: 0 0 3px 3px rgba(0,0,0, 0.7); 
-mox-box-shadow: 0 0 3px 3px rgba(0,0,0, 0.7); 
}

如果我設置了＃內容寬度自動樣式，那麼該網頁是充分響應，但沒有默認寬度。如果我像上面那樣將其設置爲960像素，則整個網頁的寬度都是固定的。我一直在爲此奮鬥了一段時間，任何幫助表示感謝，謝謝！

來源

2013-03-08 swiper192

寬度：100％或百分比，而不是100％ – Sedz 2013-03-08 03:10:25

某種看起來像這樣[樣品]（http://dev.flowinteractive.com.au/belleisle/）或不？如果你有'屏幕寬度：1920px'，那麼佈局保持'960px'，但如果'屏幕寬度'更小'1000px或720px'，那麼佈局變得靈活。那是你要的嗎？ – jhunlio 2013-03-08 03:19:32

試試這個：

#content{ 
    max-width: 960px; 
    width: 100%; 
    height: auto; 
    box-shadow: 0 0 3px 3px rgba(0,0,0, 0.7); 
    -webkit-box-shadow: 0 0 3px 3px rgba(0,0,0, 0.7); 
    -mox-box-shadow: 0 0 3px 3px rgba(0,0,0, 0.7); 
}

請注意，我已經設置960爲max-width，但隨後設置width至100％。這將使該網站響應，但仍然有寬度爲960像素（除非該瀏覽器的大小小於該值）。

來源

2013-03-08 03:13:26

WOW不容易... thx男人！ – swiper192 2013-03-08 03:54:56

您可以將問題標記爲已解決？ – 2013-03-08 04:01:22

我看到albertxing已經給你一個難以理解的答案，但我想推薦你去了解Ethan Marcotte-響應式網頁設計（rwd）的教父。

他已經在Alistapart撰寫了一些很棒的文章，您可能需要從頭開始。好東西！

來源

2013-03-08 13:20:48 PatrikJarl

剛剛檢出他的東西，真棒文章！ thx Patrik！ – swiper192 2013-03-09 17:14:27

很高興你喜歡它。它幫助我成爲一名Web開發人員。 – PatrikJarl 2014-09-25 14:41:44

將網頁內容設置爲默認寬度，但也可調整大小

回答

相關問題