将网页内容设置为默认宽度，但也可调整大小

我试图做出完全响应的网站，但我需要网页的默认宽度为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

将网页内容设置为默认宽度，但也可调整大小

回答

相关问题