ほげほげ見聞録

技術メモ、備忘録、使い方はそのうち覚える

レスポンシブサイト:最低限の作成設定

必要な項目

 レスポンシブでないサイトとの違いは下の2点。

  1. viewport
  2. CSS

viewport

 表示の設定。下の場合は横幅はページを表示しているデバイスの横幅、ズームは1倍。

 <meta name="viewport" content="width=device-width,maximum-scale=1" />

http://www.w3schools.com/css/css_rwd_viewport.asp

CSS

 表示しているブラウザの横幅がどれくらいの場合にどのCSSを適応するか設定可能。

 @media screen and (min-width:500px){}

他注意点

 画像のサイズ設定はautoにしておかないと、解像度が低いデバイスでははみ出る。