4

Photoshopで、幅1280、1024、640ピクセルの3つの異なる解像度のWebサイトレイアウトを受け取りました。私のRWDの経験はやや限られているので、Webデザイナーがサイズのブレークポイント、流動性などの観点からどのように考えるべきかをよりよく理解したいと思います（執筆時点）。

このプロジェクトに由来する私の具体的な質問は次のとおりです。

  1. プロジェクトが典型的な会社のWebサイトであるとすると、なぜデザイナーはこれら3つの解像度を採用するのでしょうか。
  2. 一般的に、これらの解決策は最適ですか、それとも他の人に依頼する必要がありますか？
    （1024、768、320の方が理にかなっているのではないでしょうか？あるいは、「正規のブレークポイントではなく、自然なブレークポイントを探す必要がありますか？）
  3. iPhone 3（@ 320px）および4（@ 640px）に関して640レイアウトを実装することをどのように考えればよいですか？

助けてくれてありがとう。

4

2 に答える 2

7

  1. これらは、より一般的な横向きの解像度のようです。1280はデスクトップ用のワイドバージョン、1024は通常のデスクトップ/ランドスケープタブレット、640はモバイル用の横向きです。個人的には、レスポンシブフレームワークのこれらの正確な解像度は見ていません。

  2. 参考として、2つのクールなレスポンシブフレームワークを紹介します。Skeletonは、960px +（デスクトップ）、768px（タブレット）、および<480px（モバイル）の3つの基本レベルで実行されます。特にレスポンシブに不慣れで、まだピクセルの操作に慣れている場合は、これらは本当に良い解像度だと思います。または、同じ原則（デスクトップ、タブレット、モバイル）を使用し、ピクセルの代わりにemsを使用し、モバイルファーストを念頭に置いて設計されたGoldilocksアプローチを使用することもできます（たとえば、小さいバージョンから設計を開始します。デスクトップ用の「余分なもの」を追加します）。レスポンシブに関するクールな記事や内容については、ThisisResponsiveブログもチェックすることをお勧めします。

  3. iPhoneのデザインは特別です。それらを異なる解像度とは考えないでください。最も薄い状態（ポートレートですが、ランドスケープでも同じ状態です）では、320x480（古いモデル）で作業しています。上記のフレームワークは、モバイル状態でこれを対象としています。網膜を使用するモデルは、基本的にこれと同じ「解像度」で機能しますが、見慣れた高解像度では各ピクセルを2倍にします。ここでのデザインに関する主な関心事は、網膜対応画像に関するものです。それに関しては、このSmashingMagの記事は物事をクリアするはずです！

于 2012-10-10T16:04:27.303 に答える
0

彼らはおそらく、ワイドデスクトップ、デスクトップ、ランドスケープ電話フォーマットをターゲットにしています。参照：http ：//astronautweb.co/2012/01/response-web-design-four-states/

（1024幅のデザインが実際には1024ピクセル幅ではないことを願っています。）

于 2012-10-10T15:48:39.373 に答える