5.1. メディアクエリを使ってみる

メディアクエリの動作を確認するためのデモです。

• 5.1.1b. メディアクエリの幅指定とスクロールバー
• 5.1.1e. メディアクエリの幅の指定にはその数値も含まれる

メディアクエリの指定方法のデモ

メディアクエリの指定方法のデモです。以下のデモページでは、それぞれ、モバイルファースト、デスクトップファーストの考え方でメディアクエリを指定してみました。この程度のページだと、CSSファイルは数百バイトの差ですみましたが、大規模なサイトだと、CSSのファイルサイズに大きな差が生まれる可能性がありそうです。

• 5.1.4. モバイルファーストなメディアクエリの指定方法
• 5.1.5. デスクトップファーストなメディアクエリの指定方法

---

テストしたブラウザ・端末

上のデモページは、以下のブラウザ・端末で確認を行いました。メディアクエリをサポートするブラウザとスマホ端末から確認をしています。

• Chrome 23 (OS X Lion / Win 7)
• IE 9 (Win 7)
• Firefox 16 (OS X Lion / Win 7)
• Opera 12.10 (OS X Lion / Win 7)
• Mobile Safari (iOS 6.0.1 / iPhone 5)
• Mobile Safari (iOS 5.1.1 / iPhone 4)
• Mobile Safari (iOS 5.1.1 / iPad第1世代)
• ブラウザ (Android 2.3.3 / P-07C)

※バグなどがありましたら、@rriverまでお知らせください。随時、情報の修正や追加をしていきます。