最適なウェブページ幅とその互換性のある実装方法

次の記事では、css-tricks のソリューションに基づいて 2 番目の方法を実装する方法について説明します。これは実際には非常に簡単です。

3.

まず、Web ページのデフォルトの幅は、表示幅 1024px に合わせて決定されます。これは、1024x768 が現在最も一般的な解像度であるというだけでなく、この幅が Web ページに最も適しているためでもあります。1) 3 列レイアウトに十分なコンテンツを収容できます。2) 1 行のテキストは長すぎてはいけません。1024 ピクセルが限界で、長すぎると読み疲れを引き起こしやすくなります。3) 現在のインターネット帯域幅の状況では、Web ページで高解像度に必要な大きなサイズの画像を使用することは困難です。

次に、Web ページの幅は 780 ピクセル〜 1260 ピクセルの範囲内で自動的に変更されます。つまり、最小値は 780 ピクセル以上、最大値は 1280 ピクセル以下になります。

最後に、解像度が大きい場合、Web コンテンツは自動的に中央に配置されます。

4.

たった 4 行の CSS ファイルの書き方を以下に示します。これらのステートメント行はすべてページ全体、つまり body タグまたは最も外側の div 領域に適用されることに注意してください。

マージン: 10px 自動;

この行により、Web ページがどの解像度でも中央に配置されます。

最小幅: 780px;
最大幅: 1260px;

これら 2 行は、Web ページの最小幅と最大幅を指定します。 IE6 ではこれら 2 行はサポートされていないため、IE6 では無効であることに注意してください。

幅:式(document.body.clientWidth < 782? "780px" : document.body.clientWidth > 1262? "1260px" : "auto");

さらに、内部ブロックを自動的に拡大縮小したい場合は、その幅をパーセンテージで表すことができます。例:

#div-左{
幅:50%;
}

#div-右{
幅:50%;
}

最終結果とソースコードのダウンロードはここからご覧いただけます。ブラウザウィンドウのサイズを変更すると、Web ページが 780 ピクセル〜 1260 ピクセルの範囲内で自動的に拡大縮小されることがわかります。

5.

最後に、あまり意味がないので、コンピューターを使用するときに盲目的に高解像度を使用しないことをお勧めします。