HTML

headタグの中に以下を記載します。ただ、VScodeでファイルを作った際にhtml:5を打つと、これは自動で出てきます。ReactやVueにもデフォルトで記載がありますね。

// index.html

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

CSS

// common.css

@media screen and (min-width: 481px) {
/* PC向けスタイル */
}
@media screen and (max-width: 480px) {
/* スマートフォン向けスタイル */
}

min-width: 481pxというのは最低481pxのデバイスに適用されるよという意味です。minという言葉が使われているので若干分かりづらいですが、481px以上のデバイスであれば自動的にこちらが適用されます。例えばmin-width: 481pxと記載してPCとスマホを分けた場合、同じタッチ操作のデバイスでありながら、iPadはこちらに含まれます。
逆にmax-width: 480pxは480px以下のデバイスに適用されるよという意味。大体のスマホはこれにあたるのではないでしょうか。

画面サイズを複数指定するときの注意点

min-widthは小さいものから大きいものに、
max-widthは大きいものから小さいものに向かって指定していかなければいけません。

// common.css

/* NG例 */
@media screen and (min-width: 700px) {
/* 本当はこっちを当てたい */
}
@media screen and (min-width: 481px) {
/* こっちにも当てはまるので適用されてしまう */
}
@media screen and (max-width: 480px) {
/* 本当はこっちを当てたい */
}
@media screen and (max-width: 700px) {
/* こっちにも当てはまるので適用されてしまう */
}

というのも、CSSは上から読み込まれるので、せっかく指定しても下に書いたものが上書きをしてしまうのです。
ここを適当に書いていて暫くハマった記憶があります。

JavaScript

JSは指定方法が2つあります。まずは僕が個人的に使う方から。

CSSと同じように画面サイズから指定する

// common.js

function switchByWidth(){
  if (window.matchMedia('(max-width: 480px)').matches) {
    // スマートフォン向け処理
  } else if (window.matchMedia('(min-width:481px)').matches) {
    // PC向け処理
  }
}
// ロードとリサイズの両方で同じ処理を付与
window.onload = switchByWidth;
window.onresize = switchByWidth;

JSはif文で指示をパスすることができるので、CSSとは逆に
min-widthは大きいものから小さいものに、
max-widthは小さいものから大きいものに
向かって書いて、elesで飛ばしていくことが無難なようです。
そもそも、JSでデバイスではなく画面サイズごとに指示をする場面はあまり出てきませんが…。
CSSが画面サイズで判断をしている都合上、処理に互換性を持たせる意味でこちらをよく用います。
画面をリロードしたときと、PCなどで画面幅を変更したときに同じ処理を与えなければなりませんので、
画面処理を関数に入れて下2行で呼び出しています。

JavaScriptでuseragentを取得して切り替える

// common.js

if( /^Mozilla/5.0 ((iPhone;|iPad;|iPod;|Linux; U; Android|Linux; Android)/i.test(navigator.userAgent) ) {
  // スマートフォン向け処理
}else{
  // PC向け処理
}

ユーザーエージェントを取得し、iOSの端末とAndroidの端末であるかをチェックして処理を分けています。
スマホ用ブラウザとPC用ブラウザではtouch関係のイベントでプロパティの構造が異なる場合があるため、その処理をきっちり分けてエラーを避ける目的では有効です。 しかし、一般的なレスポンシブではブラウザ幅を参照して画面を切り替えるのが主流ですので、こちらの手法の場合は画面とJavaScriptの処理に整合性がなくなってしまう場合があります。

参考サイト：https://www.site-convert.com/archives/1451