前にこういう記事をかいたのだが、あきらか変わってきているのでメモ

俺が考えるレスポンシブ対応最新のブレークポイント 2017 | hirokona

俺が考えるレスポンシブ対応最新のブレークポイント 2017

SP　PCデザイン切り替えのブレークポイントはまだ750pxあたりでいんじゃね？ってところから、だいぶ変わってきている気がする。

単純に、グロナビはいりきんねーから、とかレスポンシブの工数吸収とか、りあるな理由のやつがおおい気がする。
きゃんぺんさいとは特に顕著。

つまり、「でっかくなっちゃった」

SP画角と判断されるレンジは広く、
PC画角と判断されるレンジは逆に狭くなってきている
なのでブレークポイントのポイントもそれに合わせて数値が大きくなっている場合が多い。

PCでみてて、あ、SPに切り替わるポイントはよなってきてるな〜とおもったので、サイトをメモしとく用に記事準備しておく。

というわけで下記に羅列する（つもり）。（他にもあったけど記録できてない）

900pxブレーク

Paper – Dropbox
https://www.dropbox.com/paper

990pxブレーク

THEO[テオ] by お金のデザイン | ロボアドバイザーで、おまかせ資産運用
https://theo.blue/

ちなみに私の中の流行りは800〜960ブレイクです

さらに細かく対応するとき用に下記のような感じの分岐にしています。

@if $size == phone_only {
@media (max-width: 600px) { @content; }
} @else if $size == tablet_portrait_up {
@media (min-width: 601px) { @content; }
} @else if $size == till_tablet_portrait { //★main breakpoint max896px
@media (max-width: 896px) { @content; }
} @else if $size == tablet_landscape_up { //★main breakpoint min897px
@media (min-width: 897px) { @content; }
} @else if $size == desktop_up {
@media (min-width: 1100px) { @content; }
}

bootstrapでいうss m lって感じでしょうか（もうわすれたけど）

desktop_upは基本max-widthで吸収できないなにかの計算を止めたり、背景がざんねんなことになっていたら表示方法変えたり。
phone_onlyはほとんど使いません。

考え方は前の記事で投稿した下記記事の考え方からあまり変わっていませんがご参考までに。

[CSS]多様化したデバイスに対応！CSSで使いやすいブレイクポイントを的確に定義する方法 | コリス

[CSS]多様化したデバイスに対応！CSSで使いやすいブレイクポイントを的確に定義する方法

980はええっ！って言われそうでビビります。