1

流動的なデザインを実装する方法は 2 つあります (表示される画面のサイズに合わせて調整する方法)。

アプローチ 1: 利用可能なブラウザーのサイズ (またはビューポートの幅/高さ) を使用して、それに応じて CSS を定義することができます.... これは、CSS @media max-width:320px を使用することと同じです。非常に小さいサイズに圧縮されていると、モバイル デバイスと同じデザインが表示されます。

アプローチ 2: 表示されるデバイス (デスクトップ/モバイル/タブレット) に基づいて CSS を設計します。これは、CSS @media min-device-width:768px を使用するのと同じです。

ご覧のとおり、「幅」または「デバイス幅」のいずれかに基づいて適用する CSS を識別する方法に違いがあります。

私の質問は、メディアクエリとそれらを適用する方法に関するものではありません..

私の質問は、2 つの設計アプローチのうち、どちらを優先するべきかということです。デバイス用に設計する必要がありますか、それとも利用可能なブラウザ領域用に設計する必要がありますか?

4

3 に答える 3

1

私は常に、利用可能なブラウザー領域を設計します。モバイルデバイス市場とハードウェア製造 (より高い画面解像度と画面比率) は常に進化しており、デバイスの設計は短期間であなたのウェブサイトを混乱させると信じています.

私はこのテーマに非常に興味があるので、あなたの最終決定がどうなるか教えてください.

于 2011-09-15T07:57:57.240 に答える
1

私は「利用可能なブラウザー領域のデザイン」アプローチを好みます。なぜなら、ブラウザーの小さな領域用の CSS があっても、Web サイトを完全に表示するためにユーザーにブラウザー ウィンドウを最大化するように強制するべきではないからです (ただし、それを使用しないため、ユーザーには、理論的にはより多くの画面スペースがあります)。これは、ワイドスクリーン モニターを使用するデスクトップ ユーザーだけでなく、タブレット ユーザーにも影響します。たとえば、Windows 8 では、ブラウザーを画面幅の 2/3 に拡大する便利な機能が提供されますが、これは小さすぎて Web サイトを適切に表示できない場合があります。

于 2011-09-15T07:59:31.553 に答える
0

私はモバイルファーストのアプローチ、またはデバイス固有の最小限のアプローチに傾倒しています。小さなスタイル シートとモバイル用に構築されたサイトを最初に作成し、次にメディア クエリを介してより高い解像度に対応するものを追加します。

于 2011-11-30T11:02:51.070 に答える