PCサイト・モバイルサイトの微調整
レスポンシブウェブデザインを構築すると、どうしてもPCサイトと、スマートフォンサイトで、最終的に必ず微調整をします。
例えば「H1」のフォントサイズを、PCサイトでは40pt、スマートフォンサイトでは24ptのように微調整を行い、サイトを完成させます。今回のこの画面サイズに合わせた微調整の方法をご紹介します。
メディアクエリ
微調整はメディアクエリを使い、CSSを切り分けます。
スタイルシートを読み込む方法
//767pxまでの画面サイズに適用 (max-midth) <link rel="stylesheet" href="xs.css" media="screen and (max-width:767px)"> //768px以上の画面サイズに適用(min-widht) <link rel="stylesheet" href="sm.css" media="screen and (min-width:768px)">
CSSに記述する方法
@media screen and (max-width:767px) { /* 画面サイズが767px以下の場合読み込む */ h1 { font-size:24pt;} } @media screen and (min-width:768px){ /* 画面サイズが768px以上の場合読み込む */ h1 { font-size:40pt;} }
ポイント解説
Bootstrapは4つのブレークポイントがあります。各画面サイズ(767px以下、768px以上、992px以上、1200px以上)に合わせてフォントサイズや、コンテントエリアの幅が変わります。

ですので、コードは上記でも例としてあげさせていただいたコードを使うことがおおいです。
@media screen and (max-width:767px) { /* 画面サイズが767px以下の場合読み込む */ h1 { font-size:24pt;} } @media screen and (min-width:768px){ /* 画面サイズが768px以上の場合読み込む */ h1 { font-size:40pt;} }