レスポンシブデザインを実現する方法として、一昔前はCGIによる振り分けがメインでしたが、現在ではCSSでメディアクエリを利用するのが一般的な方法となりました。 メディアクエリはCSSにおいて@media～{　}と記載します。～には以下のように様々なメディアタイプ、メディア特性を条件とし、適用するデバイスを指定します。

　～　例　～　

@media screen and (max-width: 500px) {
　width:500px;
}

　尚、メディアクエリを作動させる前提条件として、.html側に以下のメタタグの記載が必須です。

<meta name="viewport" content="width=device-width,initial-scale=1.0">

　レイアウト保持を目的にuser-scalable=noを併せて書いているケースがありますが、特にスマホでは画面拡大縮小できないと操作性が大きく低下しますので、書かない方が良いです。

メディアタイプ

　表示する対象による条件指定です。概ね all もしくは screen が利用され、それ以外はあまり利用する機会はないと思います。

メディア特性

　幅や高さ向きなど、メディアごとの状態です。以下ビューポートとデバイスについては同じ幅でも意味が違いますので注意して下さい。
主に利用されるのは min-width max-width です。heightを利用することはほとんどありません。またorientationについても幅で代用する場合が多く利用することはほとんどありません。

　～　ビューポート(width)とデバイスワイズ(device-width)の違い　～　

　widthとdevice-widthの違いはiPhoneのRetinaディスプレイ等、高解像度のスマホで表示する場合に発生します。

　例えば、一般的なパソコンの場合、解像度は1920px×1080px。
　画面上でプラウザを最大化して表示した場合、width＝1920px、device-width＝1920pxと同じになります。
　そしてこのブラウザの表示幅を少しずつ縮めるとどうなるでしょうか？
　width＝1000px、device-width＝1000px
　↓
　width＝500px、device-width＝500px
　というようにwidthとdevice-widthは同じ値のまま小さくなっていきます。
　このようにパソコンだけ考えた場合、まったくwidthとdevice-widthの違いを意識する必要はありません。

　一方、Retinaディスプレイ搭載のiPhone6を例にすると、非搭載だったiPhone3と比較して以下のような差がでます。

　世代が進むにつれベースとなるdevice-widthも大きくなっていくのですが、それはさておき、iPhone3ではwidth、device-widthともに320pxでしたが、
　iPhone6ではwidth＝750pxに対してdevice-width＝375pxとなっています。

　これは、高解像度ディスプレイにより、密度が上がったことで375pxの幅でも750pxまで、ぼやけることなく表示できるということです。このためiPhone6では最大サイズの750pxで表示すれば良いのかと言えばそうではありません。もし最大サイズの750pxで表示してしまうと文字が小さく表示されてしまい見にくいだけなのです。
　高解像度ディスプレイはあくまでも画像など小さくて見にくい場合にピンチ（拡大）して確認したい。ピンチした時に画像が劣化しない。という目的のものです。
　この理由から表示は375pxで表示させるべきです。
　そしてその他多数のスマホ、タブレットに対応させるため、
　<meta name="viewport" content="width=device-width,initial-scale=1.0">
　と宣言します。こうすることによって、デバイスごと実際の端末幅で表示させておいて、高解像度ディスプレイについてはピンチして拡大したときも画像が劣化しないという適切な設定となります。
　つまり、
　ビューポート(width)＝最大の表示幅
　デバイスワイズ(device-width)＝適切な表示幅（実際の端末幅）
　と言えます。

メディアクエリ利用例

　メディアタイプのみ指定

@media screen {
　margin:0;
　padding:0;
}

　メディア特性のみ指定

@media (max-width:500px) {
　margin:0;
　padding:0;
}

　　メディア特性は()で囲みます。

　メディアタイプ、メディア特性指定

@media screen and (max-width:500px){
　margin:0;
　padding:0;
}

　　複数条件の場合はandでつなぎます。他にor、notも使えます。

メディアクエリの一般的な設定

　スマホおよびタブレットは多くのメーカーより多数の製品が発売されています。そのビューポート(width)、デバイスワイズ(device-width)の規格は統一されておらず、乱立する状況です。
　この為、何が正解とも言えない状況で、個別に設定するしかないのですが、以下代表的な値です。

　スマホ縦は480px、スマホ横は768pxと言われてきました。しかしiPhoneX以降横向きがPCレベルの812px等状況がどんどん変わっています。
　これをいちいち考慮するかしないかは、現場での時間的な余裕によると思いますが、
　概ね480px、768px(又は812px)の2つのブレイクポイントでいいのではないかと思います。
　これに加えPC表示とタブレット（又はスマホ横）の表示を分けたい場合は1024pxのブレイクポイントを追加します。

　格子状のガイドライン（グリッド）に沿ってデザインを行うことで、そのグリッドをPC表示の場合は横に10個表示、モバイル表示の場合は横に2個表示というように設定してレスポンシブ対応する手法です。
　概ね、Bootstrapなどのフレームワークを利用するのが一般的ですが、現場によってはソースの視認性が悪化すること、Bootstrapを理解する技術者が少なく教育の時間を考えると手間がかかり導入のメリットがなくなることを理由に使用禁止としている事もあります。

フルードデザイン

　widthをpx単位ではなく、100%のように%で指定することで、レスポンシブ対応する手法です。幅を100%と指定するのは一般的な手法であり無意識に指定することが多いと思いますが、フルードデザインという名前があります。

フルードイメージ

　imgにmax-width:100%を指定することで、画像をレスポンシブ対応させるのに加え、想定以上に画像が大きく表示され画面サイズからはみ出すことを防ぐ手法です。

img {
　max-width:100%;
}