WordPress レスポンシブWebデザイン

WordPress/PHP

viewportの指定(head要素内に記述)

<meta name="viewport" content="width=device-width , initial-scale=1.0, maximum-scale = 1.0, user-scalable=0' />

viewport
ブラウザーの画面表示領域（初期値は横幅980pxに指定されている）

width=device-width
viewportの幅をデバイスのスクリーンの幅（スマホだと320px）に合わせる

initial-scale（表示の初期倍率）=1.0
これを指定しないとスマホを横にした場合Viewportは320pxのままとなり、コンテンツが少し拡大されたような状態になってしまう。

maximum-scale = 1.0
ユーザーがズームできる範囲を指定。 1.0は拡大縮小させない。

user-scalable=0
ユーザー操作による拡大縮小を禁止。

※拡大縮小をオフにしてもユーザーが十分に閲覧できる文字サイズや操作できるボタンサイズを考える必要がある。

メディアクエリーの設定

  • メディアクエリーとは、デバイスの画像解像度・ウィンドウの幅・向きなどの指定条件にあわせて別々のCSSを適用できる機能
  • ブレイクポイント：スマホ（縦）320px/スマホ（横）480px/iPad 768px/pc 1024px
  • 画面幅768px以上(画面幅768px以上、1024px未満)の指定
@media screen and (min-width : 768px){
/* ここに768px〜1023pxまでのCSSを記述*/ 
}