0

この CSS は次のように機能します。 

@media (max-width:1023px) {
    html {
        margin: 0;
        padding: 0;
        height: 100%;
        width:1024px;    
    }
    body{
        margin: 0;
        padding: 0;
        overflow-y:scroll;
        height: 100%;
        min-width: 1024px;
    }    
}

@media (min-width:1024px)  {
    html {
        margin: 0;
        padding: 0;
        height: 100%;
    }
    body{
        margin: 0;
        padding: 0;
        overflow-y:scroll;
        height: 100%;
    }
}

したがって、解像度が小さい場合はmin-width: 1024px;、ブラウザー出力にオプションがあります。ただし、これは何も変更しません。解像度が小さい場合でも、ブラウザーはドキュメント全体を現在の解像度制限内に収めようとします。

1024px の解像度の幅とは:

ここに画像の説明を入力

小さな画面とは何ですか:

ここに画像の説明を入力

そのため、小さな解像度に幅を使用したいのですが、ページを 1024px の幅で表示し、これらの画面に表示される部分は、左から右にスクロールすると解像度になります。

4

2 に答える 2

1

上記のコメントに基づいて、メディア クエリを完全に削除し、これを使用することができます。

html {
    margin: 0;
    padding: 0;
    height: 100%;
}
body{
    margin: 0;
    padding: 0;
    overflow-y:scroll;
    height: 100%;
    width: 1024px;
}

ただし、繰り返しを避けるために、よりクリーンアップされたバージョンは次のようになります。

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body{
    overflow-y:scroll;
    width: 1024px;
}
于 2013-06-22T23:32:26.650 に答える
1

では、ブラウザーのビューポートの要素に 1024 ピクセルの最小幅を<body>それよりも狭く設定したにもかかわらず、要素がブラウザーのビューポートよりも<body>広くレンダリングされていないということですか?

奇数。Chrome 27で動作します：

どのブラウザを使用していますか? メディア クエリは、IE ≦8、Firefox ≦3、および Safari ≦3.1 ではサポートされていません。

于 2013-06-22T21:57:47.233 に答える