問題タブ [media-queries]

CSSを整理するときは、関連するスタイルをすべて保持するのが好きです（ヘッダースタイルは1つのセクションにあり、フッタースタイルはすべて同じ場所にあるなど）（申し訳ありませんが、OOCSSの支持者）。

私は最近、小さい/大きい画面のメディアクエリを試しています。組織的なスキームを維持するために、コードの各セクションでターゲットにしている画面サイズごとに個別のクエリを含める必要があります。（たとえば、7つの異なる画面サイズをサポートしている場合、「ヘッダー」CSSで7つの異なるメディアクエリを実行し、次に「フッター」セクションで7つのクエリを実行します。）

これが私がそれをどのように行うべきかという質問は別として、メディアクエリの非常に多くのブロックを持つことに技術的な影響はありますか？（これらはすべて、、、min-widthまたはmax-width両方です。100の異なるクエリがあったとしましょう。ただし、何度もチェックしているサイズは7つしかありません。）ブラウザの解析に時間がかかりますか？

CSSファイル内でjQueryを実行できない可能性があることは承知しています。しかし、ここに私の難問があります：

オーバーレイのある div がいくつかあります。デスクトップでは、ユーザーがオーバーレイにカーソルを合わせると、上にスライドしてコンテンツが表示されます。

モバイルでは、ホバー状態はありません (適切に実装されています)。既存の Media Query ロジックを使用して、これらの特定の div で jQuery ホバーを無効にするにはどうすればよいですか?

アドバイスを歓迎しますか、またはこの問題の代替ソリューションについても教えてください。

私はサイトのモバイルバージョン（mobile.domain.comではない）を構築していますが、デバイスに基づいて異なるスタイルシートを提供しています。

だから私はこのようなものを持っています：

私のモバイルスタイルシートは、明らかにモバイルサイトで必要なものだけを非表示/表示し、のクラス/スタイルをオーバーライドしていstyle.cssます。

私が抱えている問題は、オーバーライドしていないスタイルが見つからないように見えることです。つまり、完全に削除する style.cssと、サイトは完璧に見えます。私がそこに留まる style.cssと、それはそれほど完璧ではないように見えます。

ページの読み込み時にstyle.cssを動的に削除する方法はありますか？

それとも私はこれを完全に間違った方法で行っていますか？

私がやりたいことは不可能だと思いますが、とにかくお願いします=>

まず、印刷時に画像を表示していません。ページの画像が重くなったり、少なくとも数枚の適切なサイズの画像がインクを消費する可能性があるためです。したがって、画像を表示せずに画像のALTテキストを表示して、ユーザーが画像が何であるかを知ることができるようにすることは可能ですか。

2番目-ユーザーがフォームを印刷するとき、フォームのスタイルが設定されているため、少し見苦しいです。入力のテキストだけを表示するように入力を変更する方法はありますか？

これと同様の質問があります〜スタイルシートの印刷-入力をテキストに変換します〜これはjQueryを使用して実行できることを理解していますが、これを実現するためのCSSのみの方法はありますか？

ありがとう！

編集-私は私の2番目の質問を理解しました。ページに合わせてフォームの枠線と背景を白にしました。つまり、テキストのみを非表示にして表示します。=>

max-device-widthiPhone/Android 携帯用の HTML ページをいくつか開発する必要がありますが、との違いは何max-widthですか? 画面サイズごとに異なるcssを使用する必要があります。

違いは何ですか？

次の CSS @media クエリを使用して、iPhone や Android などのモバイル ブラウザー用にページのスタイルを設定しています。

しかし、私のユーザーの 1 人が、自分の Droid 2 フォンを検出していないと言っています。彼のユーザーエージェント文字列は次のとおりです。

どうしたの？

私は現在、モバイル版のサイトを構築しています。

個別のドメイン（mobile.example.com）ではなく、応答性の高いアプローチ（メディアクエリを使用して画面サイズの特定のCSSをロードする）

しかし、「ページサイズ」を小さくする方法がわからないようです。

私のサイトのデスクトップバージョンには、5つの比較的大きな高解像度の画像をスライドするjqueryスライダープラグインが含まれています。私のモバイル側にはそれが含まれていません。ただし、これらのイメージは、モバイルバージョンのビルド時に引き続きロードされます。

displayプロパティをnoneに設定しましたが、これでも画像が読み込まれます。

では、JavaScriptまたは別のタイプのメディアクエリを使用して、ロードする必要があるファイルとロードしないファイルを指定するにはどうすればよいですか？

Chrome開発者ツールでorientation:portraitのcssをデバッグするには?

内部に書い たもの(orientation:portrait)は、Firebug や Chrome 開発者ツールからその場で編集することはできません。通常のプロパティが常に表示されます。

iPad 固有の Web サイト (デスクトップ ユーザー用に別の Web サイトを作成しています) を作成し、ポートレート モードとランドスケープ モード用に異なる CSS を書きたい場合、どの方法を使用しますか?

最初の方法

1 つの http リクエストだけで 1 つの CSS ファイルを保持できます

内部でメディアクエリを使用して、コードを分離しておきます

2番目の方法

2 つの http リクエストで 2 つの CSS ファイルを使用できます。

どちらの方法を希望し、改善すべき提案があれば教えてください。

注:タブレット用に別の Web サイトを作成しています。デスクトップ用とモバイル用ではありません。

編集 2: *最初の方法では、ランドスケープも指定した方がよいか、必要ありません。*

これを最初のメソッドコードと比較してください

style="text/css"css リンクから削除してもよろしいですか?

また、リンクを維持media="all"する必要がありますか、それとも必要ありませんか?