レスポンシブ対応しようとした時に困ったこと
Dec 2 2014
このsota1235.comは静的サイトジェネレータであるMiddleman blogとCSSフレームワークであるPureを用いて作成されている。
これはcamuro.orgをリスペクトしての構成であるが、レスポンシブ対応を試みた時につまづいたのでメモする。
Media Queriesとviewport
Pure CSSではdivタグにclassを付与することでレイアウトを作成することができる。
生成されたページのCSSを見ると以下のようになっている。
@media screen and (min-width: 48em)
.pure-u-md-1-4, .pure-u-md-6-24 {
width: 25%;
}
min-width: 48emの部分で基準のサイズを決めており、このような記法をMedia Queriesという。
また、これを反映させるためにはmetaタグでviewportを設定する必要がある。(ここでつまづいていた…)
sota1235.comでは以下のように設定してある。
<meta content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" name="viewport">
contentの内容は
width=device-width… 横幅をデバイスの幅として設定initial-scale=1.0… 倍率の初期設定user-scalable=no… ユーザがズームできるかの設定minimum-scale=1.0… 最小比率の設定maximum-scale=1.0… 最大比率の設定
という感じ。
これを設定してあげることでCSSがデバイスの画面幅を読み込み、そのサイズにあったスタイルシートをあててくれる。
「とりあえずBootstrapダー！！」とか「Pureでレスポンシブなおしゃれブログ構築ヤー！！」なんて言う前に、こういう基礎の部分をしっかり抑えないとつまづくことが多いような気がします。
お勉強になったしいい教訓でした。ちゃんちゃん