MediaQuery

条件に一致する時、要素の背景色は黄色

普通にSP＆PCの切り替え

• 0 <= w <=768

  @include mq() { }
  または
  @include mq(sp) { }

• 768 < w

  @include mq(pc) { }

spMaxサイズではないところで切り替え

• w <= 600

  @include mq(max, 600, "<=") { }

• 600 < w

  @include mq(min, 600, "<") { }

• w < 600

  @include mq(max, 600, "<") { }

• 600 <= w

  @include mq(min, 600, "<=") { }

範囲指定

• w < 600

• 600 <= w <=700

  @include mq(fromto, 600, "<=", "<=" , 700) { }

• 700 < w

• w <= 600

• 600 < w < 700

  @include mq(fromto, 600, "<", "<" , 700) { }

• 700 <= w

• w <= 600

• 600 < w <=700

  @include mq(fromto, 600, "<", "<=" , 700) { }

• 700 < w

• w < 600

• 600 <= w < 700

  @include mq(fromto, 600, "<=", "<" , 700) { }

• 700 <= w

ちゃんと使ってみる

spサイズは赤
pcサイズは青@include mq() { background: red; }
@include mq(pc) { background: blue; }←メディアクエリを使わなくてOK

w < 600 は 赤
600 <= w <=650 は 青
650 < w <=700 は 黄色
700 < w < 750 は 緑
750 <= w < 800 は ピンク
800 <= w は グレー @include mq(max, 600, "<") { background: red }
@include mq(fromto, 600, "<=", "<=" , 650) { background: blue; }
@include mq(fromto, 650, "<", "<=" , 700) { background: yellow; }
@include mq(fromto, 700, "<", "<" , 750) { background: green; }
@include mq(fromto, 750, "<=", "<" , 800) { background: pink; }
@include mq(min, 800) { background: gray; }

w <= 550 は 黄色
550 < w <=SP最大サイズ は 緑
SP最大サイズ < w <=1000 は ピンク
1000 < w は グレー background: pink;
@include mq() { background: green }
@include mq(max, 550) { background: yellow }
@include mq(min, 1000, "<") { background: gray }

ちなみに旧式の場合・・・ background: #000;
@media screen and (max-width: 768px) {
background: red;
}
@media screen and (min-width: 769px) {
background: blue;
}Chromeは画面幅を0.5刻みで把握しているっぽい（拡大表示しないと、試せないかも。）
そのため、この旧式のmediaqueryでは768.5pxの時にスタイルが当たってなかった。

【メモ】
safariはメディクエリのサイズの考え方が違うから、スクロールバーが表示されていたら15pxほどずれるよ！（調整してないよ）