問題タブ [media-queries]

私は最近、Web サイトのモバイル バージョンを開発しており、ブラウザがモバイル デバイス上にあることが検出された場合に CSS ファイルを変更できるようにしたいと考えています。以前の試みはこちらでご覧いただけますが、これを実現する最も現実的な方法は、メディア クエリに焦点を当てることであると判断しました。

ここでの問題は、メディア クエリがまったく機能しないことです。常にデフォルトのスタイルシートをロードします。ここに私が持っているコードがあります:

このコードで何かを見逃していませんか? このために提供されている多くのチュートリアルを使用してみましたが、役に立たないようです。私はここで本当に行き止まりになったので、どんな助けも大歓迎です。

やあみんな、これを解決する方法がわからないという奇妙な状況。

メディアクエリを使用してレスポンシブ Web サイトにアクセスしようとしています。埋め込まれた YouTube 動画もレイアウトに対応する必要があるため、各動画の with を 100% に設定し、その高さを比率で計算しようとしています!

結果は次のようになります。

したがって、もともとこのビデオは、YouTube から埋め込んだときに 500px x 306px でした。

問題は、これが実際に機能する可能性があることですが、パーセンテージがどこを指しているのかわかりません。幅 100% は完全に正しく、私のレイアウトに依存している場合、高さ 61% は正しくありません。61% は正しい数値ですが、おそらく外部コンテナーまたは何かの 61% であるため、間違っているように見えます。

この問題を解決する方法を教えてください。ビデオの元の値に応じて、ビデオを100％（現在は正しいです-サイズ変更しても）、比例した高さにしたいだけですか？

演算子and、only、notおよびカンマ,は、メディア クエリで使用すると何を意味するのでしょうか?

メディアクエリで使用できる他の演算子はありますか?

私は2つのスタイルシートを持っています。1つはiPhoneと他のハンドホールドデバイスにのみ適用する必要があります

@media screen and max-device-width: 480px { ... }

もう一方はそれ以外の場合にのみ適用する必要があります

@media screen and min-device-width: 481px { ... }

私は現在、それらを1つの大きなcssファイル、@media上記の2つの異なるセクションに配置していますが、IE7/8はどのセクションにも適用されないことに気付きました。

問題の解決策は何ですか？私がグーグルで検索できる唯一の解決策は、デスクトップスタイルシートをIEの条件付きコメントに再度含めることです。

しかし、W3C Webサイトは、これがなくても同じ効果を実現します。どのように？

高さと幅、デバイスの幅とデバイスの高さの違いは（簡単に言えば）何ですか？

orientation素人の言葉でメディア機能が何をするのか説明してもらえますか?

aspect-ratioとの簡単な違いは何device-aspect-ratioですか？

colorメディア機能が正確に何をするのかを非常に簡単な言葉で説明してくれる人がいますか？

私は周りを見回しましたが、この質問に対するより簡潔な答えが必要です。

現在のプロジェクトで複数のメディアデバイス用にCSSを構築するための最良の方法を模索しています。次のスタイルシートを作成できるようにしたい：

1. CSSリセット（使用するものすべて）
2. 通常のデスクトップの「画面」。（デスクトップコンピューターのみ）
3. 印刷'印刷'（印刷のみ）
4. iPhone /ハンドヘルド（ハンドヘルドのみ）
5. IE6スタイルシート（IE6のみ）

ですから、私の質問は次のとおりです。これを制御する正しい方法を考えるのは正しいのでしょうか。

• resets.cssにmedia="all"を設定します
• desktop.cssのmedia="screen"を設定します
• レガシーブラウザの場合は、条件付きコメント「ここ」を使用します。
• Printing.cssのmedia="print"を設定します
• 次のようなcss3メディアクエリを使用します：@media only screen and（min-device-width：320px）and（max-device-width：480px）{}

メソッドを共有できる複数のデバイスCSSをセットアップした経験がもう少しある人はいますか？これを自分でどのように整理しますか？

以下の値は何を意味しますか?