問題タブ [media-queries]

メディア クエリは機能していましたが、現在は機能していません。何かがうまくいかなかったポイントを逃しました。Chrome バージョンの Firebug で html 要素を調べたところ、メディア クエリのルールが、コンパイル プロセスの初期段階で定義されたルールによって上書きされていることがわかりました。

誰でも問題を見つけることができますか?

http://www.jezenthomas.co.uk/huang/

4つのメディアクエリがあります。1、3、4番目の作品ですが、2番目の作品は活性化していないようです。

480x720（2番目のメディアクエリ）がデフォルトで最初のメディアクエリになっているのはなぜですか？

期待されること：

実際に何が起こっているのか：

480x720（2番目のメディアクエリ）がデフォルトで最初のメディアクエリになっているのはなぜですか？

Modernizr 2.0ベータ版には、@ mediaクエリのブラウザサポートを検出する方法がありますか？

Modernizr 1.7では、を使用してテストできModernizr.mq('(min-width)')ましたが、新しいバージョンではその機能が欠落しているようです。同等のものはありますか？

私はcssでメディアセレクターを使用しています：@media all and（orientation：landscape）{/*など*/ Safariでレイアウトをテストしてから、iPadシミュレーターでテストします。しかし、Safariは横向きで修正されているようです。Safariに私のメディアを縦向きにする方法を教えてください。

これは、向きが横向きのときにレイアウトをテストできるようにするためです。

styleSheetsオブジェクトのメディアプロパティを見つけました 。http：//www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-MediaListを参照してください。 ただし、少なくともSafariまたはiPadシミュレーターでは、リストは空です。したがって、リストに新しいメディア文字列を追加することはおそらく答えではありません。

ビューポートメタタグの幅と高さを急いで縦向きに設定してみました：いいえ。メディアはまだ横向きです。

ああ、私はcssの特別なテストバージョンを作りたくありません。

特にiPhoneを対象としたCSSメディアクエリを使用しようとしています。

通常のリンク rel を使用すると機能します。

ただし、このメディアクエリを試してみるとうまくいきません:

CSS メディア クエリを使用して iPhone をターゲットにするにはどうすればよいですか?

私のサイトは、ページの中央にある小さな 540x500 ピクセルのボックスです。iPhone と Blackberry はどちらもコンテンツの先頭を切り捨てています。ページの中央に完全に配置しました。ページの余白が他のデバイスで処理されることを期待して、メタ ビューポートの設定をいじっていましたが、運が良かったのですが、コードの両方の行を組み合わせたソリューションが見つかりません。

私のコードは以下のとおりです。メディア クエリを調査し、メタをデバイス幅 (余白を切り取る) に設定し、その他のオプションを多数設定しました。正直なところ、私は自分がうるさいことを知っており、これにばかげた時間を費やしてきました。

私は助けが必要です！

まず、HTML

CSS

メタ設定

デバイス (およびその向き) に応じて適切なスタイル シートを適用する Web アプリを開発しようとしています。

合計で 5 つのメディア クエリがあります。

デスクトップ、iPad、iPhone ではすべて動作しますが (ブラウザー バージョンと Web アプリ バージョンの両方で)、Android ブラウザーではランドスケープ メディア クエリが失敗しますか? 何か案は？「max-device-width」を間違えましたか?

私は自分のサイトでメディアクエリを使用しようとしました。FirefoxとSafariではうまく機能しますが、IEでは機能しません。メディアクエリをIE（Internet Explorer 7および8）でうまく機能させることを知っている人はいますか？

ここにコードがあります：

CSS @mediaクエリを発見したばかりですが、すばらしいと思います。ただし、すべてのブラウザがそれらをサポートしているわけではないことを私は知っています（つまり、IEの最新バージョンを除くすべて）。

次に、デフォルトのスタイルシートで何をすべきですか？通常サイズの画面をターゲットにする必要がありますか？最小公分母のルートに移動して、モバイルスタイルシートをロードする必要がありますか？それとも、デザインを完全に流動的にする必要がありますか？

@mediaクエリをサポートしないブラウザのデフォルトのスタイルシートを作成する場合、一般的に適切な計画は何ですか？

私はメディアクエリについていくつかの調査を行ってきましたが、特定のサイズのデバイスをターゲットにする方法をまだよく理解していません。

デスクトップ、タブレット、モバイルをターゲットにできるようにしたいと考えています。いくつかの不一致があることは知っていますが、これらのデバイスをターゲットにするために使用できる汎用システムがあると便利です。

私が見つけたいくつかの例：

または：

各デバイスのブレークポイントはどうあるべきですか？