未経験からエンジニア 奮闘記

未経験からエンジニアに自由に生きる途中

MENU

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

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

結論

下記の様に分ければ良い!! 今は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