横幅だけじゃない！Media Queryでの指定の方法

レスポンシブデザインのコーディングではMedia Queryを使用して分岐点を作るのが当たり前みたいな感じになっております。

レスポンシブデザインのコーディングをするのですが、時によって、横幅だけの設定じゃ振りきれないときがあるかと思います。

そんな時は横幅だけでなく、他にもいろいろ設定の仕方があるようです。

まずは基本の設定の仕方から。
Media Queryってそもそも何？というのは割愛させていただきます！
よろしければ以下のサイトをご覧ください！
レスポンシブなサイトをつくりたい！実装方法はじめの一歩
 レスポンシブWebデザインはviewportとメディアクエリーからはじめろ！ | 株式会社Bark to Imagine

Media Queryの設定の仕方

大きく3通りあります。
それは以下になります。
ちなみに以下の場合は、480px以下の時に適用させたい場合になります。

link 要素の media 属性で書く場合


<link rel="stylesheet" media="screen and (max-width: 480px)" href="base.css">

1	<link rel="stylesheet" media="screen and (max-width: 480px)" href="base.css">

@media で書く場合


@media screen and (max-width: 480px) { 
}

1 2	@media screen and (max-width: 480px) { }

@import で書く場合


@import url("base.css") screen and (max-width: 480px);

1	@import url("base.css") screen and (max-width: 480px);

どれがいいとか正解とかはないのですが、僕自身よく使用しているのは@mediaで書く場合です。

この指定ですが、andや,(カンマ)を使用することにより、様々な設定が可能になります。


/* 481px以上かつ768px以下の場合に表示したい場合 */
@media screen and (min-width: 481px) and (max-width: 768px) { 
}
/* 768px以下もしくは、デバイスが縦向きの場合に表示したい場合 */
@media screen and (max-width: 768px), screen and (orientation: portrait){ 
}

/* 481px以上かつ768px以下の場合に表示したい場合 */

@media screen and (min-width: 481px) and (max-width: 768px) {

}

/* 768px以下もしくは、デバイスが縦向きの場合に表示したい場合 */

@media screen and (max-width: 768px), screen and (orientation: portrait){

}

基本使うのこの程度指定になるかと思います。
僕もこれぐらいしか使うことはありませんが、
実は他にもいろんな指定の仕方がありました。
ざっと挙げると、

max-device-width：
デバイスの最大幅。
min-device-width：
デバイスの最小幅。
device-aspect-ratio：
デバイスのアスペクト比
device-pixel-ratio：
デバイスの解像度（webkit）
orientation：
デバイスの向き portrait,landscape

などなど

いっぱいあり、どういう時に使うんだ？！みたいなのもあります。

詳しくは以下のサイトをご覧ください。

Media Queries

ちなみに、以下の方法でiphoneやipadのみに設定する方法があるようです。


/* iPhone 3G/3GS だけに指定したい場合 */
@media only screen and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 1) {

}

/* iPhone 4 だけに指定したい場合 */
@media only screen and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) {

}

/* iPad CSS だけに指定したい場合 */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

}