CSS

メディアクエリ ブレークポイント設定 2016 決定版 @media css

More than 1 year has passed since last update.

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