スマホ対応のブレイクポイント

スマホ対応のブレイクポイント

結論

下記の様に分ければ良い！！ 今は560pxでスマホとPCの幅が区切られるらしい。

iphoneXでも、widthが370px程らしい

# スマホ対応
@media (max-width: 559px) { }

## pcの対応
@media (min-width: 560px) { }

注意点

max-width、mix-widthは値が以上以下なので、max-widthは559px、min-widthは560pxと値を被らせない

参考記事

hashimotosan.hatenablog.jp