24

全幅スライダーを含む Web サイトを構築しています。ブラウザ ウィンドウの 100% 。CSSはこのようになります

.slider {
    width:100%;
}

...スライダーの親は<body>、一部のラッパーdivではありません。

私のジレンマは、幅が 1600px の画像を使用し、CSS を使用して 100% に拡大すると、画像が拡大ではなく縮小されるため、最大化されたブラウザー (モニターの幅) が 1600px 未満の人にとっては問題ないということです。 （モバイル/レスポンシブサイズの考慮事項は今のところ考慮していません）しかし、非常に大きなモニターで最大化されたブラウザーを使用している人は、その画像を縮小せずに拡大するため、外観がわずかに低下します.

いくつかのスライダーを確認しましたが、それらは約 2000 ピクセルの画像幅を使用していますが、大部分のモニターで拡大する必要のない幅はありますか?

注意: CSS、グリッド システム、Twitter Bootstrap、レスポンシブ サイトまたはアダプティブ サイト、幅 960px の Web サイトなどについて質問しているわけではありません。ウェブサイトのラッパーの 100% であるスライダーについて話しているわけでもありません。ブラウザーの幅の 100% にスケーリングされたスライダーを作成するために使用される画像ファイルのピクセル幅について質問しているだけです。

4

6 に答える 6

23

1920pxはあなたが行きたい最高です。これは、画面解像度サイズの「ハイエンド」と見なされ、それより高い値を設定すると、ブラウザが動作します。スライド幅を100％に設定している限り、1920よりも高い解像度の画面サイズに問題なく調整されます。これにより、帯域幅を使いすぎるという問題も解決され、読み込み時間には影響しません（これはサイトの機能にとって重要です）。

于 2012-06-25T17:34:31.563 に答える
1

2013 年の画面解像度の世界統計によると、1920x1080 のディスプレイ サイズは、現在人気のある他のトップ 10 の画面サイズの中で 4 番目です。これは、これまでのモニターの最後の高解像度ディスプレイでもあります。

于 2014-01-02T21:25:19.447 に答える
1

ターゲットオーディエンスに応じて、より個人的な選択だと思います. これらの統計は、知識に基づいた決定を下すのに役立つ場合があります。http://www.w3schools.com/browsers/browsers_display.asp

于 2016-08-24T10:13:39.597 に答える
0

960px は、ブラウザー ウィンドウ全体でオーバーフローしないようにするための、Web ページのコンテンツ領域の標準的な全幅です。

http://960.gs/

于 2012-06-25T17:30:10.560 に答える
-1

上ですでに気づいたように、標準の幅は 960 ピクセルです。しかし、多くのサイトがアダプティブ化を行っているため、確実なことは言えません。たとえば、私のモニターの解像度は 2560x1440 です。誰もそのような大規模なサイト解決を行いません。

アダプティブ サイトをモニターおよびモバイル デバイスとして作成する場合は、 Twitter ブートストラップまたは類似のものを使用することをお勧めします。グリッド システムを使用することもできます。たとえば、designinfluencesです。

于 2012-06-25T17:44:55.553 に答える