スマホやタブレットにも合った表示を､レスポンシブ・デザインという｡そのためには､メディアクエリによる記述が重宝する｡
それぞれのデバイスの幅を考慮した記述方法だ｡こんなかんじ｡
▼表示画面の幅が767以下の場合に適応される｡
@media(max-width :767px){
適応させたいセレクターとCSSを記述する｡
｝
▼表示画像が767px以上の場合に適応される｡
@media(min-width :767px){
適応させたいセレクターとCSSを記述する｡
｝
▼表示画像が500〜767pxの場合に適応される｡
@media(min-width :500px) and（max-width :767px){
適応させたいセレクターとCSSを記述する｡
｝
で､やっているうちに気づいたのだけれど､Chromeのデベロッパーツールにて､各種iPhoneやAndroid対応機種の表示が確認できるんですねぇ｡いままで､たとえば Androidユーザーのひとに､ちゃんと表示されているか､イチイチ確認していたので｡これ､便利ネ｡
