ホームページ制作 Webデザイン ブログデザイン Web構築 Android linux PHP パソコン情報 ブログ 掲示板
メディアクエリーについて
メディアクエリーについて
Media Queriesはユーザーの状態を調べ、それにあった特定のスタイルシートを適用することができます。例えば、大きいディスプレイ用と小さいモバイル用にそれぞれ異なるスタイルシートを指定することができます。
IE8以下では、Media Queriesは使えません
１．どうしても対応したい場合は、Respond.jsやcss3-mediaqueries-jsを使って、IE8以下もレスポンシブ対応を行う
２．もしくは、ie8以下のブラウザ用デザインを作成する
<!--[if lt IE 9]>
<!-- ie8対応ブラウザ -->
<![endif]-->
IE8のブラウザシェアはこちら
現在は、IE8以下でのレスポンシブ対応はしないというのが現実的
メディアクエリーの書き方・使い方
ＰＣサイズの横幅が、980pxで設計した場合を基準にしております。
大きい画面サイズから設定する場合は以下のようになります
/* デフォルト：980px以上用（PC用）の記述 */
@media screen and (max-width: 979px) {
/* 979px以下用（PC用／タブレット用）の記述 */
}
@media screen and (max-width: 767px) {
/* 767px以下用（タブレット／スマートフォン用）の記述 */
}
@media screen and (max-width: 479px) {
/* 479px以下用（スマートフォン用）の記述 */
}
小さい画面サイズから設定する場合は以下のようになります
/* デフォルト：479px以下用（スマートフォン用）の記述 */
@media screen and (min-width: 480px) {
/* 480px以上用（タブレット／スマートフォン用）の記述 */
}
@media screen and (min-width: 768px) {
/* 768px以上用（PC用／タブレット用）の記述 */
}
@media screen and (min-width: 980px) {
/* 980px以上用（PC用）の記述 */
}
画面の幅を、個別に指定する方法
@media screen and (min-width: 980px) {
/* 980px以上用（PC用）の記述 */
}
@media screen and (min-width: 768px) and (max-width: 979px) {
/* 768px - 979px用（PC用／タブレット用）の記述 */
}
@media screen and (min-width: 480px) and (max-width: 767px) {
/* 480px - 767px用（タブレット／スマートフォン用）の記述 */
}
@media screen and (max-width: 479px) {
/* 479px以下用（スマートフォン用）の記述 */
}