レスポンシブデザインにするためにやったこと

初めてのモバイル対応でやったことをまとめてみます。

#やったこと
##最新機種のサイズの確認
こちらのサイトを参考にしました。
http://mydevice.io/devices/
最新機種が出るたびに解像度は大きくなる傾向にあるので、随時気にしていかなければならないようです。

##viewportの設定

こちらのエントリで色々検証されてますが…→もう逃げない。HTMLのviewportをちゃんと理解する
自分も色々試した結果、結局のところ下記の記述に落ち着きました。

<meta name="viewport" content="width=device-width,initial-scale=1.0">

失敗1: 縮小されたままになってしまった例

この設定はだめでした。

<meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no”>

失敗2: iPhoneのsafariでうまく表示されなかった例

<meta name="viewport" content="width=device-width, initial-scale=1.0">

成功例との差がわかるでしょうか？
このコードではiphoneのsafariでうまく表示されませんでした。
正解はなんとwidth=device-width, initial-scale=1.0"と半角スペースが入っているということでした。
原因がなかなか突き止められずにすごい時間を食ってしまいました……。スペースにも気をつけましょう。

##メディアクエリの設定をmixinにした
メディアクエリの記述はどうしても色々な箇所ででてきました。
その時に何度も同じ記述を書いているとタイプミスがあったり、あとで更新した場合にも面倒だったので以下のようにmixinにしました。

@mixin pc($width: 769px) {
  @media screen and (min-width: $width) {
    @content;
  }
}
@mixin smartphone($width: 768px) {
  @media screen and (max-width: $width) {
    @content;
  }
}

#この方法はできなかった！sassの書き方で気をつけたいこと

##メディアクエリで変数の分岐はできない

こんな感じでメディアクエリを使って変数の更新をしようと思いました。

$header-height: 70px;
$footer-height: 100px;
@media screen and (max-width: 768px) {
	$header-height: 50px;
	$footer-height: 80px;
}

しかしこの方法だとスクリーンのサイズに関わらず、あとに書いた内容で変数が設定されていました。mixinを使っても同じです。
スクリーンサイズによって変数を変えることはできませんので、別の書き方をする必要があります。

参考：http://foundation.zurb.com/forum/posts/16411-sass-variables-not-working-in-media-queries