レスポンシブ Web デザインの 9 つのポイント

レスポンシブ Web デザイン は、マルチスクリーンの問題に対する優れた解決策ですが、印刷の観点から見ると少し困難です。固定のページ サイズ、ミリメートルやインチ、物理的な制限はなく、開始方法もありません。 Web サイトを開くことができるデバイスが増えているため、デスクトップとモバイルのピクセル設計手法を排他的に使用することも過去のものになりました。したがって、レスポンシブ Web デザインの 基本原則 を明確にし、それに対抗するのではなく、流動的な Web ページを受け入れる必要があります。

1. レスポンシブ Web デザインとアダプティブ Web デザイン

それらは同じように見えるかもしれませんが、違います。これら 2 つの方法は相互に補完し合い、どちらが正しくてどちらが間違っているということはありません。

2. コンテンツの流れ

画面サイズが小さくなると、コンテンツが縦方向のスペースを占めるようになり、下のコンテンツが下に押し出されていきます。ピクセルとポイントを使用してデザインしている場合、これは少し難しいかもしれませんが、慣れれば意味が分かるでしょう。

3. 相対単位

キャンバスのサイズはデスクトップ、モバイル、またはそれらの間の任意のサイズにすることができます。ピクセル密度も変化する可能性があるため、さまざまな画面で使用できる柔軟なユニットが必要です。ここで、パーセンテージなどの相対単位が役に立ちます。したがって、幅を 50% に設定すると、画面 (または、開いているブラウザ ウィンドウのサイズである view) の半分を占めることになります。

4. ブレークポイント

ブレークポイントを使用すると、事前定義されたポイントでレイアウトを変更できます。たとえば、デスクトップ画面には 3 つの列がありますが、モバイル画面には 1 つの列しかありません。ほとんどの CSS プロパティはブレークポイントに基づいて変更できます。通常は、特定のコンテンツに基づいてブレークポイントを設定します。文が画面の長さを超える場合は、ブレークポイントを追加するとよいでしょう。ただし、ブレークポイントの使用には注意が必要です。何が何に影響を与えるかを理解するのが難しいと、すぐに混乱が生じる可能性があります。

5. 最大値と最小値

モバイルデバイスのように、コンテンツが画面の幅全体を占めるとよい場合があります。しかし、それがテレビ画面上にあり、同じコンテンツが画面の幅全体を占める場合、通常はあまり意味がありません。ここで最小/最大値が関係します。たとえば、width を 100% に設定し、max-width を 1000px に設定すると、コンテンツは画面いっぱいに表示されますが、1000px を超えることはありません。

6. ネストされたオブジェクト

相対的な位置を覚えていますか?他の 要素に応じて多くの要素の位置を制御するのは難しいため、コンテナを使用して要素をラップすると、理解しやすく整然としたものになります。ここで、静的ユニット (ピクセルなど) が登場します。これらは、モジュール化したくないコンテンツ (ロゴやボタンなど) に役立ちます。

7. モバイルとデスクトップの優先順位? 技術的に言えば、プロジェクトが小さい画面で開始されてから大きい画面になるか (モバイルが最初)、その逆か (デスクトップが最初) は問題ではありません。ただし、最初にモバイルから始めるかどうかを決定する際に役立つ追加の制限が追加されます。通常、誰もが最初に両方の端を一緒に書くので、どちらがより良く実行されるかを確認する方が良いでしょう。

8. Web フォントとシステム フォント

あなたの Web サイトにクールな Futura または Didot フォントがあればいいのにと思いませんか? Webフォントが使えるようになりました！見栄えは良くなりますが、入力するフォントの数が増えるほど、ページの読み込みに時間がかかることに注意してください。一方、システム フォントの読み込みは非常に高速ですが、ユーザーがフォントをローカルに設定していない場合は、デフォルトのフォントに戻ります。

9. ビットマップ vs

ベクター

アイコンに多くの詳細や派手な効果を追加することを考えたことはありますか?よく考えてみると、ビットマップを使用する方が適切です。そうでない場合は、ベクター グラフィックスの使用を検討してください。ビットマップの場合は、jpg、png、または gif 形式の画像を使用します。ベクトルの場合は、SVG またはアイコン フォントを選択するのが最適です。それぞれに対応する長所と短所があります。ただし、画像

のサイズも考慮する必要があります。Web ページ上の画像は最適化する必要があります。一方、ベクター画像は通常より小さいですが、一部の古いブラウザーではベクター画像がサポートされていません。また、曲線が多い場合はビットマップよりも重くなる可能性があります。したがって、慎重に選択してください。

以上がレスポンシブ Web デザインの 9 つのポイントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。