2

画面の横向きのユーザーがそれを処理できるように、サイトの周りに灰色の境界線が必要ですが、表示する必要がある最も重要なものはコンテンツです-特に十分な幅の画面を持っていない人にとっては（境界線は単に表示されるべきではありません）または切断されるか、その他のもの）。私の現在の CSS は常に左右で 200px を使用しています。パーセンテージに切り替えてみましたが、まだそれを使用しています。本文の幅を指定するように切り替えても、それを修正しないコンテンツではありません。

私の既存のサイトのコードは次のとおりです: http://jsfiddle.net/syQgH/1/、関連する CSS を以下に示します。

body {
    background-color: #e1ddd9;
    font-size: 12px;
    font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
    color:#564b47;
    margin: 20px 200px 20px 200px;
}
#content {
    width: 100%;
    padding: 0px;
    text-align: left;
    background-color: #fff;
    overflow: auto;
}

ページ全体の結果は次のとおりです: http://jsfiddle.net/syQgH/1/embedded/result/

画面幅が狭いユーザーには、x 軸が切り取られ、y 軸にスクロールバーが表示されます。x軸にスクロールバーを追加するためにoverflow-yを追加することについては知っていますが、理想的には、サイトの周りに140pxの動的なグレースペースを画面の横向きで許可し、許可しない場所ではほとんどまたはまったく持たないようにすることができます. これには、固定ピクセル値ではなくパーセンテージを使用する必要があると思いますが、画面のランドスケープが十分でないユーザーには効果を与えたくないので、これは同じ効果があるようです。

私は JavaScript/jQuery ソリューションにオープンです。

4

4 に答える 4

1

レスポンシブ デザインを探しています。

body全幅にして#content、たとえば 80%幅にしてみてください。次に、200px の余白をなくし、単純に 80% を中央に配置します。

http://jsfiddle.net/daCrosby/syQgH/5/

関連する CSS:

body{
    margin: 20px 0px;
}
#content {
    width: 80%;
    margin:auto;
}

次のステップは、すべてのpx幅と高さを失い、幅を % ベースの値に置き換えることです (高さを失うだけです - ブラウザがそれを見つけ出しmax-width、必要に応じて追加するかもしれません)。

次に、他の人が指摘したように、@mediaクエリを使用して、いくつかのブラウザー幅に理想的なサイズを設定します (たとえば、 make#contentの幅 95% on @media (max-width: 600px).

于 2013-07-02T15:20:03.473 に答える
1

メディア クエリは良い答えです。実際、それは HTML5 標準によって与えられた答えです。

広くサポートされています:

http://caniuse.com/#feat=css-mediaqueries

メディア クエリ機能を中心に構築されたツールは多数あります。

いくつかの例:

于 2013-07-02T15:09:45.173 に答える
-1

HTMLでは、次を使用できます

<meta name="viewport" content="width=device-width" />

これにより、ページの「100%」がデバイスの幅になります。

于 2013-06-26T14:00:19.053 に答える