1.1つのWebサイトすべてのブラウザ。
@Takが述べたように、ここでの答えは「プログレッシブエンハンスメント」と「グレースフルデグラデーション」です。しかし、彼が与えた定義は完全には正しくありません。適切なものは次のとおりです。
「プログレッシブエンハンスメント」（リンクを参照）は、HTML4やCSS1などの実証済みのテクノロジーを使用して最初に古いブラウザー用にコーディングし（JavaScriptの有無にかかわらずIE6 / 7が良い出発点です）、進行するにつれてエンハンスメントを追加することを意味しますCSS3とほとんどのHTML5をサポートするモバイルデバイス上のChomeとSafariに至るまで、より新しいブラウザでテストすることによって。このようにして、サポートされている機能の可能な限り最高の組み合わせをブラウザに提供することを目指します（ちなみに、完全になることは決してないので、プロジェクトを実行しないように80/20の法則を覚えておいてください）。
「優雅な劣化」（リンクを参照）は、ちょっと同じことですが、逆に、より怠惰な方法です。最新のブラウザに対してサイトの構築を開始し、古いブラウザで受け入れられるまで「パッチ」と「修正」を適用します。これは、最初から適切に計画するよりもはるかに多くの作業を作成することになり、このアプローチで一般的に発生する傾向があるのは、開発者/利害関係者がある時点で諦めることです（つまり、これを取得するにはあまりにも多くの作業が必要です） IE6 / 7での作業-スコープを解除します）
2.レイアウトを標準化するための最良の方法
個人的には、モバイルデバイスとデスクトップデバイスにまたがる標準レイアウトが必要な場合は、大きなフォント（小さなモバイル画面に表示されるように）と小さなフォント（デスクトップブラウザを持っている人が読むことができるように）を組み合わせて使用することをお勧めします。デスクトップサイズの900-1000px幅のすべての詳細）。
このサイトは一例です：
http://www.valuetrader.net
デスクトップブラウザで開くと多くの詳細が表示されますが、外出先でスマートフォンを使用すると、すべての重要な情報（つまり、共有を購入または販売する必要がありますか？）が非常に大きなフォントで表示されます。私の小さな画面で判読できるように見えます。
2014年更新
質問のこの部分は、「レイアウトを実装するための最良の方法は何ですか？」に効果的に変更されました。。
現時点で（そして、広く利用可能なCSS3サポートの過去数年間）、クロスデバイスレイアウト設計の標準的なアプローチは、メディアクエリに基づくいわゆる「レスポンシブ」レイアウトを使用することです。ユーザーがモバイルフレンドリーなレイアウトを使い始めるために利用できるCSSフレームワークはたくさんあります。
「レスポンシブ」デザインの基本原則は、モバイルデバイスでスクロールすると、垂直方向のスペースが事実上無限になるため、水平方向のスペースによってのみ制限されるということです。したがって、画面が小さくなるにつれて、ページフローを使用して使用可能なすべての水平方向のスペースを埋め、ナビゲーションバーまたは水平方向の要素を垂直方向に折りたたんで、スペースを使用せずにアイテムを積み重ねることを確認する必要があります。水平方向に。
サイトの「応答性」をテストする標準的な方法は、ブラウザウィンドウの側面をドラッグして、使用可能な幅を減らすことです。
より良い方法は、開発者ツールを使用することです。たとえば、Chromeにはデバイスモードを切り替えるボタンがあります。これは、Stackoverflowを使用した例です。
#site-bannerデスクトップ画面とモバイル画面の要素のレイアウトを指定するメディアクエリの例は次のとおりです。
/* DESKTOP SUPPORT */
#site-banner { width: 1000px; background: #fff; margin: 0px auto; height: 120px; }
/* TABLET SUPPORT - rules apply below 1000px width */
@media all and (max-width: 1000px) {
#site-banner { width: 700px; }
}
/* PHABLET & MOBILE SUPPORT - rules apply below 700px width */
@media all and (max-width: 700px) {
#site-banner { width: 480px; height: auto; }
}
/* MOBILE SUPPORT - rules apply below 480px width */
@media all and (max-width: 480px) {
#site-banner { width: auto; height: auto;}
}
3.動的画像スケーリングはどのように行われますか？
モバイルデバイスはこれをたくさん行うので、一般的にはそれがどのように機能するかを理解する必要があります。基本的に、最初のモバイルブラウザが登場したとき、デスクトップブラウザで動作しているサイトがモバイルでも動作することを確認する必要があったため（そうでない場合は、スマートフォンを使用してWebを閲覧することはできません）、考え出す必要がありました。サイトの幅を検出し、利用可能な画面解像度にサイズ変更する賢い方法。
たとえば、私のサイト「www.desalasworks.com」は900ピクセル幅にコード化されていますが、320ピクセルの小さな画面で縮小すると正常に機能します（ページ上の画像は、最近傍などのさまざまな方法を使用して自動的にリサンプリングされます）サンプリングとバイキュービック補間、および可能な限りフォントをネイティブフォントに置き換えます）。画像のサンプリングに関する限り、スマートフォンで写真を「ズームイン」および「ズームアウト」にピンチしたことがある場合は、私が何を話しているかがわかります。
通常、画像を適切にリサンプリングするためにCSSについて心配する必要はありません。パーセンテージ幅を使用すると、CSSが少しおかしくなることがあるので、その場合はピクセルに固執して、ブラウザがアイテムの場所を簡単に識別できるようにします。お互いの関係。モバイルブラウザを具体的に検出し、サイトの幅を320pxに設定すると、それに応じてすべてがインラインになりますが、実際には、モバイルデバイスで動作するサイトを用意する必要はなく、これを行うと強制されます。モバイルサイトとデスクトップサイトの2つのサイトを維持するため（一部の企業はこれを喜んで行っています）。
4.パーセンテージ/固定幅。
個人的には、画面の中央に固定幅を使用する傾向があり（CSSマージン：0px自動を使用）、レイアウトを標準化するのは少し悪夢であるため、長い間パーセンテージ幅を使用していません。パーセンテージ幅を使用する場合は、基本的にさらに多くのテストを行う必要があるため、私はそれらから遠ざかる傾向があります。
これは私の意見であることに注意してください。一部の「応答性の高いウェブ」の達人は、ほぼすべての部分で幅のパーセンテージで誓います。私は、限界利益と見なすレイアウトの予測可能性を犠牲にするという考えに売られていません。しかし、私はデスクトップWebアプリの構築のバックグラウンドを持っているので、モバイルWeb（水平方向のスペースが貴重でレイアウトが単純になる傾向がある）だけに焦点を当てた場合は、おそらく違った考え方をするでしょう。