仕事ではなく個人で作成したサイトをスマートフォンやタブレットに対応させるのは意外と大変で、次の3patternが考えられます。
A） HTMLファイルにviewportを指定する
B） メディアごとにCSSファイルを作成し切り換える
C） 自動変換ツールを活用する
［C］は有料なのでサイト内容に対して財布と相談ですね。［B］はページ数が多いと作成及び今後の修正にも手間が掛かるので、かなり大変です。
例えば私のサイトは・・・
PCだとこんな感じになるように作成しています。コレ見てピンと来た人がいるかもしれませんが、スマートフォンを意識したデザインにしています。
そのままタブレットやスマートフォンで表示するとこんな感じになります。
ところがHTM内に以下の記述をするだけで上の様にデバイスのサイズに合わせてくれます。
<meta name="viewport" content="width=device-width">
他にも色々設定できるので整理すると・・・
■width
表示エリア（ビューポート）の幅を指定します。
<meta name="viewport" content="width=device-width">
■height
ビューポートの高さを指定します。
<meta name="viewport" content="height=device-height">
■initial-scale
初期表示時のズーム倍率（0.1〜10.0）
<meta name="viewport" content="initial-scale=1.0">
■minimum-scale / maximum-scale
ズーム可能な最小・最大倍率
yes 可能
no ズーム禁止
<meta name="viewport"
content="minimum-scale=1.0, maximum-scale=3.0">
■user-scalable
ユーザーがズーム可能かどうか
<meta name="viewport" content="user-scalable=no">
■viewport-fit（iPhone X 以降のノッチ対応）
ノッチを含む全画面を使う設定
auto 既定のレイアウト
contain 安全領域内のみ
cover 画面全体を使用（ノッチまで）
<meta name="viewport" content="viewport-fit=cover">
