メニュー

このブログのページをスマホにも対応させました。
つまりＰＣで見た時は幅が広く、スマホで見た時はスマホの幅いっぱいに見えるように改造しました。

方法は"media"を使います。
<style type="text/css">
@media (min-width:500px){
....
}
</style>
とすると画面の幅が500pxより広い場合にだけ適用されるCSSタグを書く事ができます。
これを使えばＰＣの場合にだけ適用されるタグを作れます。

ただ、ハマった所が一つ、実際にやってみるとスマホにも適用されちゃうんですね。
悩みました。
原因はスマホがＰＣのブラウザのような大きな画面をシミレーションしているために画面サイズが仮想上大きくなっているためです。
そこでシュミレーションしないように
<META name="viewport" content="width=device-width">
を書いておくとスマホの本当の画面サイズになるのでうまくいきます。