web屋の備忘録

ホームページ制作、webマーケティング、技術資料など

*

スマートフォン対応(RWD)の設計ポイント(画面幅とメディアクエリ)

      2016/05/24

画面幅とメディアクエリのサンプル

画面表示の幅 端末・向き
320px iPhone3〜iPhone5系・縦向き時
360px Android系スマートフォン・縦向き時
375px iPhone6・縦向き時
414px iPhone6 Plus・縦向き時
480px iPhone3〜iPhone5系・横向き時
640px Android系スマートフォン・横向き時
736px iPhone6 Plus・横向き時
768px iPad系、iPad mini系、iPad Air系・縦向き時
800px Android系タブレット・縦向き時
1024px iPad系、iPad mini系、iPad Air系・横向き時
1280px Android系タブレット・横向き時
/* style.css */

/* メディアクエリサンプル */
@media screen and (min-width: 1281px) {
  /* 画面幅が1281px以上(PC専用スタイル) */
}
@media screen and (max-width: 1280px) {
  /* 画面幅が1280px以下(タブレット・スマホ共通スタイル) */
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  /* 画面幅が768px〜1280px(タブレット専用スタイル) */
}
@media screen and (max-width: 767px) {
  /* 画面幅が767px以下(スマートフォン専用スタイル) */
}
@media screen and (max-width: 414px) {
  /* 画面幅が414px以下(スマートフォン縦向き専用スタイル) */
}

PCとスマホで、480pxをブレークポイントにするときのCSS記述例。

@media screen and (max-width: 480px) {
  .pc { display: none; }
}
@media screen and (min-width: 481px) {
  .sp { display: none; }
}

※HTMLに記述するとき、PCで表示させたい時は、

<div class="pc">.....</div>

で囲む。
 
同様に、スマホのときに表示させたいのであれば、

<div class="sp">.....</div>

で囲む。

 - HTML・CSS