いきさつ
SP対応サイトを作らないといけないことになったが、メディアクエリーってどういう感じでやるのがいい感じなのかなぁ？
メディアクエリーとは?
デバイスによってCSSを分けるやつです。
if文みたいな感じで使えます。
設計方針あるある
モバイルファースト
スマホを基本にしたやつ
デスクトップファースト
デスクトップをを基本にしたやつ
問題点
- rentaディスプレイとかに対応しようとすると難しくなる
- mixinでも単純なものだと詰むところがある。
対策
いい感じ(柔軟な)のmixinを作ろう！
やっぱりmixinの可能性は無限大です！
書き方TIPS
ブレークポイント
あんまり直感的でない気がする。。(個人の感想です)
...どうして直感的でないかというと、比較演算子みたいなのが無いからなような気がする。。
慣れたら問題ないだろうけど、好みの問題かな。
$breakpoint-tablet: 900px;
@include breakpoint(400px $breakpoint-tablet) {
}
比較演算子あり書き方
こんなん
@include media(">phone", ">=tablet") {
}
// ディスプレイ指定ありの場合
@include media(">tablet", "<=desktop", "retina2x") {
}
もうすこし単純化したい。
こんなんでいい気がする。
第二引数のディスプレイ環境ははオプション。
@include media("phone") {
}
@include media("tablet","retina2x") {
}
参考
https://css-tricks.com/approaches-media-queries-sass/
最近のコメント