うん。理屈は理解した。
ブラウザの情報（横幅）からスタイルシートのどの部分を適用するか分岐させる だけ。
まずはHTML側の対応。
headタグに1行追加。
<meta name="viewport" content="width=device-width, initial-scale=1">
"width=device-width"が端末の幅を見ますよ と。
"initial-scale=1"は初期のズーム倍率を1（端末のデフォルト値）にする。
initial-scaleはなくても動くけど、変な動きしそうだから書いといた方が良さそう。
スタイルシート側は
@media screen and (max-width: 639px) {
～～～～
}
@media screen and (min-width: 640px) and (max-width: 999px) {
～～～～
}
みたいにメディアクエリを使って条件分岐させる。
あとは個々に変えたい部分を中に記載していけば良い って寸法だ。
問題は閾値をいくつにするかってことだ。
多くの端末に対応するなら細かく区切っていくべきなんだろうけど、
作るのもその後メンテするのも非常に面倒になる。
「スマホ」「タブレット」「PC」ぐらいで良いんじゃねーの？という気はする。
ウチのお客様はM$が60％以上を占めていて圧勝だけど
AndroidもiOSも10％を超えているので無視はできない。
どうするかね・・・。
あとスタイルシートの定義中で「そのままで良い」ものと「分けなくてはならない」ものを
洗い出す必要がある。
こっちの方がよっぽど面倒だな。
(; ﾟдﾟ )・・・・・
( ﾟдﾟ )
スタイルシート、1,500行あるんだが。
