レスポンシブの表示に必要なメディアクエリの基本の書き方について記載致します。
メディアクエリ（Media Queries）について
まず、メディアクエリ（Media Queries）は、WebサイトのページをPC、スマートフォン、タブレットなど、画面サイズによって、表示を切り替えるCSSの機能です。
CSS２では、印刷のprint、画面を指定するscreenやモバイルデバイスのhandheldなどmediaタイプを設定できましたが、現在ではprintのみが多く使われています。
CSS3から導入されたメディアクエリ（Media Queries）はより細かく設定できるようになりました。
特にデバイス、ビューポートの幅と高さやデバイスの向きなど、メディアの特性でCSSを指定できるのでレスポンシブデザインではメディアクエリの記載が必須と言っていいでしょう。
メディアクエリの書き方の例と基本
レスポンシブデザインでのメディアクエリの書き方、使い方は難しくはありません。
以下は記載例です。
1、メディアタイプを指定する。
まず、@mediaでメディアタイプを指定します。
PCやタブレット、スマートフォンを対象に表示のみを設定するならscreenを記載します。
@media screeen
２、デバイスの幅を指定する。
@media の後ろに対象のでデバイスの幅を指定します。
@media screeen and (max-width: 767px)
max-width:は、～以下の幅
min-width:は、～以上の幅
max-width: 767pxは、横幅７６７px以下のタブレットやスマートフォンのサイズに適応されます。
逆にmin-width: 980pxと指定すれば、９８０px以上のタブレットやPCサイズに適応されます。
３、セレクターやプロパティを記載する
｛｝内に指定した幅で適応させたいセレクターやプロパティなどを記載します。
@media screen and (max-width: 767px) {
.container {
width:95%;
margin:0 auto;
}
}
この例では、幅７６７以下サイズで、
クラスcontainerがwidthが95％、マージンが上下0、左右autoという形で適応されます。
minとmaxを一緒に設定できる
iPhone画面のように、最低と最大の幅がだいたい決まっている場合は、メディアクエリで合わせて設定できます。
iPhone4,5の横サイズ320pxを最低の幅として、iPhone 7の縦サイズ736pxを最大の幅で設定する場合は、
@media screen and (min-width: 320px) and (max-width: 767px) {
}と記述します。
他にも、デバイスのスクリーンや解像度、デバイスの向きなど設定できますが、レスポンシブデザインでの使用の場合は、まず横幅でのメディアクエリの指定方法を覚えた方が良いと思います。
メディアクエリをIE8以下に対応させる
主要ブラウザでIE8以前がネックでしたが、今年の12月にWindows Vistaもサポート終了ということもあるのでしょう。
2016年2月現在、IE10以前を使用しているユーザーがほとんどいません。
しかし、IE8に対応させる場合があるかもしれません。
その場合はjavascriptも開発されています。
下記Githubからファイルをダウンロードしてください。
https://github.com/livingston/css3-mediaqueries-js
必要なのは、
css3-mediaqueries.js
ファイルです。
このファイルを読み込めばiE8以下もメディアクエリに対応する事ができます。
ただし、CSS３がIE８以下で使えるようにはなりませんのでご注意を。
