1つだけでいい
/* モバイル（768までの端末） */
@media screen and (max-width:767px) {
}
2つで分ける
/* モバイル（768までの端末） */
@media screen and (max-width:767px) {
}
/* PC（768以上の端末） */
@media screen and (min-width:768px){
}
3つで分ける
/* 小 (タブレット以下) */
@media (min-width: 768px) {
}
/* 中 (普通のデスクトップ以下) */
@media (min-width: 992px) {
}
/* 大 (大きいデスクトップ以下) */
@media (min-width: 1200px) {
}
よく見るデバイスのサイズ
- iPhone 4s 320px x 480px
- iPhone 5s 320px x 568px
- iPhone 6/7 375px x 667px
- iPhone 6/7Plus 414px x 736px