さまざまなモニターのサイズ、スマホ、タブレットの画面サイズにも一つのhtmlファイルでフレキシブルに対応させるのが、レスポンシブWebデザイン。
スマホ、タブレットが登場したときは、PC用とスマホ用（モバイル用）など、別々にページを作っていた時代もありました。修正するにしても2つのファイルに手を加えなければなりませんので大変です。
現在では、htmlとCSS(CSS: カスケーディング・スタイルシート)の使用でWebの制作の可能性が、大きく広がってきています。
またJavaScriptなどを使用することで更に高機能なページの作成も可能になっています。
Google のインデックス登録とランキングでは、スマートフォン エージェントでクロールしたモバイル版のサイト コンテンツを優先的に使用します。
これをモバイルファースト インデックスと呼びます。
モバイル フレンドリーなサイトを作成するには（Googleの検索の基本事項）
- レスポンシブ デザイン
ユーザーのデバイスの種類（パソコン、タブレット、モバイル、非視覚系ブラウザなど）に関係なく、同じ URL で同じ HTML コードを配信しつつ、画面サイズに応じてコンテンツの表示方法を変更します。
Google では、実装と維持が最も簡単なデザイン パターンとしてレスポンシブ ウェブ デザインを推奨しています。 - 動的な配信
デバイスに関係なく同じ URL を使用します。この構成方法では、デバイスに応じて異なるバージョンの HTML を配信するために、user-agent スニッフィングと Vary: user-agent HTTP レスポンス ヘッダーを利用します。 - 別個の URL
デバイスに応じて別個の URL で異なる HTML を配信します。動的な配信と同様、デバイスに合ったバージョンのサイトにリダイレクトするために、HTTP の user-agent ヘッダーと Vary ヘッダーを利用します。
このガイドの内容は、動的な配信と別個の URL の各構成方法にのみあてはまります。レスポンシブ デザインの場合、各ページのコンテンツとメタデータはモバイル版とパソコン版で同じです
レスポンシブデザインは、使用端末（デバイスのサイズ）に応じてレイアウトを変更します。PCではフルワイドの迫力のあるレイアウトも可能。スマホでは内容を読みやすいように1列のレイアウトに、など、1つのファイルでさまざまな表現が可能です。
レスポンシブデザインは、@media（CSSのメディアクエリ）で表示を切り替えます
Googleは「モバイルファースト」を提唱していますので、基本的には、スマホのスタイリングから。あとはデバイスの幅に応して対応させます。
最低、タブレット、PCは768px以上
@media (min-width: 768px) { }
ノートブックなどを考慮して、ブレイクポイントは、1000px～1300px 以上で
@media (min-width: 1072px) { }
こういったものが基本ですが、cssの書き方によっては、max-width も使用する場合もあります。
画像もimgタグで、メディアで切り替えることができます。
以上のホームページのイメージはメディアクエリーを使用することで、様々なデバイスに対応させています。