css - 誰かがCSSメディアクエリについて説明できますか？

Question

css3.infoでそれらについての記事を読みましたが、それが十分に説明されているとは感じませんでした。また、画面サイズに応じて例を変更することもできませんでした。Safari、FF、Chromeで試してみました。

これはまだ実装の準備ができていない機能ですか？

ブラウザウィンドウの幅が1024px未満のときに、いくつかのスタイルを調整したい場合。どうやってやるの？

Answer 1

画面サイズに適用されるルールは、W3C仕様を引用すると、指定された制約で「ビューポートの幅がの場合、画面およびハンドヘルドデバイスで使用可能」であることを意味します。

http://www.w3.org/TR/css3-mediaqueries/

ビューポートが1024px未満のときにスタイルを調整する場合は、次のルールを使用できます。

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

とにかく、このルールはビューポートの実際のサイズにのみ適用されます。ページをリロードせずにビューポートのサイズを変更すると、スタイルは適用されません。

Answer 2

幅800ピクセルを超える画面に表示されたときにスタイルシートをドキュメントに適用するには、次の手順に従います。

<link rel="stylesheet" media="screen and (min-device-width: 800px)" >

幅400ピクセル未満のデバイスに表示されたときに、スタイルシートをドキュメントに適用するには：

<link rel="stylesheet" media="all and (max-device-width: 400px)" >

中身

@media all and (max-width:800px) {
    body { color: red; }
}

iPhone用

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

::メディアクエリを組み合わせる

Answer 3

サイズ変更や向きの変更に対してさまざまなメディアクエリがどのように反応するかを確認するには、次のページのデモを試してください。

http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/

メディアクエリ属性を調整して、それらがページにどのように影響するかを把握できます。

Answer 4

この問題を解決し、動的なCSSと画面サイズの最前線にあるいくつかのプロジェクトを次に示します。

• 320以上：

  「320以上」は、小さな画面のスタイルシートを開始点として使用することにより、モバイルデバイスがデスクトップアセットをダウンロードするのを防ぎます。

• 少ないフレームワーク：

  Less Frameworkは、適応型Webサイトを設計するためのCSSグリッドシステムです。これには、4つのレイアウトと3セットのタイポグラフィプリセットが含まれており、すべて1つのグリッドに基づいています。