1

完全にレスポンシブなWebサイトを作成しようとしていますが、ページのデフォルトの幅を960pxにする必要があります。私が持っている構造は次のとおりです。

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

#content widthをautoに設定すると、Webページは完全にレスポンシブになりますが、デフォルトの幅はありません。上記のように960pxに設定すると、Webページ全体の幅が固定されます。私はかなり長い間これに苦労してきました、どんな助けでもありがたいです、ありがとう！

4

2 に答える 2

3

これを試して：

#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をに設定しましたが、100％max-widthに設定していることに注意してください。widthこれにより、Webサイトはレスポンシブになりますが、幅は960pxのままです（ブラウザーのサイズがこれよりも小さい場合を除く）。

于 2013-03-08T03:13:26.847 に答える
2

albertxingはすでにあなたに恐ろしい答えを与えているようですが、レスポンシブWebデザイン（rwd）のゴッドファーザーであるEthanMarcotteについて知ることをお勧めします。

彼はAlistapartで、あなたが始めたいと思うかもしれないいくつかの素晴らしい記事を作成しました。素晴らしいもの！

于 2013-03-08T13:20:48.107 に答える