私はウェブサイトをデザインする方法を学んでいます。決定の1つは、データをユーザーに提示する方法、つまり、さまざまなモニターサイズが存在する場合、データを画面全体を占めるように構成するか（GMail）、固定幅にするか、つまり標準のモニターサイズを選択するか（ 1024x768）、すべてのモニターで同じように表示されるようにします（別名StackOverflow）。
私は可変幅設計に傾倒しています。私が理解しようとしているのは、この設計上の決定がプログラミングにどのような影響を与えるかということです。つまり、可変幅のデザイン（具体的にはCSSの使用法）を使用してWebサイトをプログラミングする場合、何を覚えておく必要がありますか？
私は一気にデザイナーではありませんが、現在構築している自分のサイトのデザインを行っています。私が以下に言うすべてを、2、3の大きな塩の粒で取ってください。
どの幅のスタイルを使用するかは、コンテンツの種類と伸縮性に大きく依存すると思います。
Gmailは実際にチートします（<div>要素の幅は、ウィンドウの幅が変更されたときにJavascriptで再定義されます）が、サイドバーは既知の量であり、動的コンテンツが適切にラップされるため、原則としてこの種のデザインは機能します。つまり、サイドバーを固定幅で挿入し、余白を使用して、中央のコンテンツがこれらのサイドバーと重ならないようにすることができます。コンテンツが大きくなりすぎると、通常は自由形式のテキストであるため、次の行に折り返され、誰も気にしません。コンテンツがコンテナから溢れる危険性があるメインコンテンツブロックでサイトで多くのことが行われている場合、可変幅はおそらく適切な呼び出しではありません。これらのタイプのデザインを機能させることができる専門家がいますが、始めたばかりの場合は試してみたくないかもしれません。私はそれを試しました、そしてそれは私を苛立たせただけでした。
固定設計の方が簡単な傾向があります。私はそれを一枚の紙にデザインを描くことに例えました。基本的に、紙のサイズを知っているので（明示的に指定したため）、ボックスを描画するときに、他のボックスを描画した場所とその行き先もわかっているため、隣のボックスと重ならないことがわかります。することが。最終的にページのどこにレンダリングされるかをより完全に制御できる傾向があります。
これに対する注意点は、選択したフォントサイズが常に使用されるフォントサイズであるとは限らないことに注意する必要があるということです。ユーザーは、ブラウザが使用するデフォルトのフォントサイズを変更して、予想よりも大きくすることができます。これにより、コンテンツが再びボックスから外れます。私がこれを回避する傾向があるのは、ブラウザのテキストのみのズーム機能を使用してデザインをテストし、フォントが3〜4倍になったときにすべてが適切に見えることを確認することです。
「標準のモニターサイズ」を選択する限り、現在の一般的な方法は、サイトの幅を960ピクセル、ギブまたはテイクに定義することです。これは、ブラウザのクロム（垂直スクロールバーなど）を考慮に入れると、1024px幅のビューポートにほぼ適切なサイズです。800x600の解像度を使用する可能性のあるユーザーが多数いる場合は、代わりに760pxのデザインを使用してください。万が一に備えて、主要なコンテンツが760ピクセルに収まるようにし、残りの200ピクセルを重要度の低いコンテンツに使用することをお勧めします。
それが少し役立つことを願っています。
コードに関しては、考えてみればそれほど違いはありません。私が個人的に最良の選択であると思うアプローチは、両方の組み合わせです。外側のラッパーを作成し、その中のすべての要素をパーセンテージ値に設定します。このように、最も外側のラッパーでパーセンテージまたは固定幅を使用することにしたかどうかに関係なく、内側は常に適切にスケーリングされます。
私は通常、最も外側のラッパーに固定幅を使用しますが、それでも内側の要素をパーセンテージ幅でコーディングします（固定幅が必要な要素を除いて、ほとんどの要素はとにかく）。クライアントが全幅のWebサイトを必要とする場合は、単一の値を変更するだけです。
結局のところ、それはあなた自身のものであれ、あなたのクライアントのものであれ、個人的な好みの問題だと思います。
お役に立てれば。