さまざまなモニターのサイズ、スマホ、タブレットの画面サイズにも一つのhtmlファイルでフレキシブルに対応させるのが、レスポンシブWebデザイン。
スマホ、タブレットが登場したときは、PC用とスマホ用（モバイル用）など、別々にページを作っていた時代もありました。修正するにしても2つのファイルに手を加えなければなりませんので大変です。
html5とcss3の使用でWebの制作の可能性が、大きく広がってきています。またJavaScript、Jqueryを使用することで更に高機能なページの作成も可能になっています。
Googleも「モバイルファースト」でレスポンシブを推奨するようになって、可能ならば、レスポンシブでデザインしたいというところです。
レスポンシブデザインは、使用端末（デバイスのサイズ）に応じてレイアウトを変更します。PCではフルワイドの迫力のあるレイアウトも可能。スマホでは内容を読みやすいように1列のレイアウトに、など、1つのファイルでさまざまな表現が可能です。
レスポンシブデザインは、@media（CSSのメディアクエリ）で表示を切り替えます
Googleは「モバイルファースト」を提唱していますので、基本的には、スマホのスタイリングから。あとはデバイスの幅に応して対応させます。
最低、タブレット、PCは768px以上
@media screen and (min-width: 48em) { /* 768px */ }
ノートブックなどを考慮して、ブレイクポイントは、1000px～1300px 以上で
@media screen and (min-width: 67em) { /* 1072 */ }
こういったものが基本ですが、cssの書き方によっては、max-width も使用する場合もあります。
画像もimgタグで、メディアで切り替えることができます。
以上のホームページのイメージはメディアクエリーを使用することで、様々なデバイスに対応させています。