レスポンシブレイアウトの概要（推奨）

レスポンシブレイアウト開発の基礎知識

この章は主に以下の部分に分かれています

• レスポンシブデザインを正しく理解する
• レスポンシブデザインへのステップ
• レスポンシブデザインで注意すべき点
• レスポンシブなウェブページレイアウトを実装するための原則

まず、レスポンシブレイアウトを正しく理解する

レスポンシブ Web デザインとは、各端末ごとに特定のバージョンを作成するのではなく、Web サイトを複数の端末と互換性を持たせることができることを意味します。例えば、折りたたみソファー、折りたたみベッドなど、現在社会にはレスポンシブな製品がたくさんあります。ソファーをコーナーに配置する必要があるとき、ソファーはdivのようであり、コーナーの場所は親要素のようなものです。親要素のスペースが変更されたため、コーナーに配置できるようにdivを調整する必要があります。プロジェクトでは、さまざまな端末に遭遇することになります。端末の解像度が異なるため、より優れたユーザー エクスペリエンスを提供したい場合は、ページを複数の端末と互換性のあるものにする必要があります。

2: レスポンシブデザインの手順

レスポンシブとは何かがわかったところで、レスポンシブデザインの手順についてお話ししましょう。「ブロガーさん、あなたはバカですか？レスポンシブデザインの手順は、1. 非レスポンシブコードを書く、2. それをレスポンシブコードに加工する、3. レスポンシブな詳細を処理する、4. レスポンシブ開発を完了するだけではないですか？」と言う人もいるかもしれません。ブロガーはショックを受けました。人々の中に達人がたくさんいることがわかりました。彼は敬意を表すために軽く微笑みました。なんてことだ、私は間違って言いました。軽く微笑むべきでした。誤解しないでください。

さて、本題に戻りますが、ブロガーは物事の真相を突き止めたい人なので、レスポンシブ デザインの根本を深く掘り下げて、これら 4 つのステップをより深く理解したいと思います。

1. レイアウトとメタタグの設定

レスポンシブな Web サイトを作成する場合、またはレスポンシブでない Web サイトをレスポンシブにする場合、最初に注目すべき点は要素のレイアウトです。レスポンシブ レイアウトを作成するときは、通常、ページの幅を固定した非レスポンシブ レイアウトを最初に作成します。これは、ここでの誰にとっても難しいことではないと思います。非応答性が解消されたら、メディア クエリとレスポンシブ コードを追加します。この操作により、レスポンシブ機能の実装が容易になります。

完了したら レスポンシブでない Web サイトが完成したら、まず HTML ページで、次のコードを タグと タグの間に貼り付けます。これにより、画面が 1:1 の表示サイズに設定され、iPhone やその他のスマートフォンのブラウザでサイトが完全に表示され、ユーザーがページをズームできなくなります。

2. メディアクエリでスタイルを設定する

メディアクエリはレスポンシブデザインの核です。ブラウザと通信して、ページをどのように表示するかをブラウザに伝えます。端末の解像度が980px未満の場合は、次のように記述できます。

3. 複数のビュー幅を設定する

iPad および iPhone ビューと互換性を持たせたい場合は、次のように設定します。

3. フォント設定

これまで、開発者が使用するフォント単位のほとんどはピクセルです。通常の Web サイトではピクセルで問題ありませんが、レスポンシブ フォントは必要です。レスポンシブ フォントは、クライアント画面に適応できるように、親コンテナーの幅を基準にする必要があります。

CSS3 では、em に似ていますが HTML 要素に使用する方が便利な rem という新しい単位が導入されました。

rem はルート要素を基準としているので、ルート要素のフォント サイズをリセットすることを忘れないでください。

4. レスポンシブデザインで注意すべき点

1. 幅は固定ではなく、パーセンテージで指定できます

2. 画像処理

ここで、皆さんに鍵をお渡しします。ブロガーさん、自慢するのはやめてください、と言う人もいるかもしれません。画像処理の鍵は何？扉を開ける鍵だと思いますか？ブロガーさん、目を覚ましてください！

ああ、なんて機嫌が悪いんだろう。私が言ったキーは実際のキーではなく、画像処理の普遍的な方法です。それは何ですか?絵が液化しています。すると誰かがこう尋ねるでしょう。「画像の液化とは何ですか?」これは非常に良い質問です。私はあなたに 99 ポイントを与えます。あなたがあまりに傲慢になりすぎるのではないかと心配なので、もう 1 ポイントを与えます。誰もが知っているように、水は目に見えず、多くの容器に収まります。では、画像を水と見なすと、画像適応の問題を解決できるでしょうか?

記事に挿入された画像など、HTML ページ内の画像の場合、次のように CSS スタイル max-width を使用して画像の最大幅を制御できます。

img タグ内の画像に加えて、背景画像としてロゴなどの背景画像もよく見かけます。

最後に、レスポンシブレイアウトの実装原則をまとめます。

まず、モバイルファーストの原則に従い、インタラクションとデザインは主にモバイルに基づいており、PCはモバイルの延長線上にある必要があります。ページはさまざまな端末と互換性がある必要があるため、レスポンシブにする必要がある重要なポイントは2つあります。レスポンシブレイアウトとレスポンシブコンテンツ（画像、マルチメディア）です。

皆さんが何を期待しているかは分かっています。写真がなければ真実はありません。ドームもないなんて、ナンセンスですよね? 単なる話です。心配しないでください。私はこんな風に打ち負かされることはありません。これが私の個人的なレスポンシブ レイアウト ドームです。

さて、ブロガーの苦労の成果がここにあります。次回はモバイル端末のレイアウトについてまとめます。

上記のレスポンシブレイアウトの概要（推奨）は、エディターがあなたと共有するすべてのコンテンツです。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

オリジナルURL: http://www.cnblogs.com/dreamsboy/archive/2016/07/09/5656009.html