タグ付けされた質問 「media-queries」

メディアクエリを使用すると、画面や印刷などのメディアタイプや、ビューポートやデバイスの高さと幅などのメディア機能の条件に基づいて、CSSスタイルを条件付きで適用できます。これらはW3C CSS3仕様の一部です。

4
メディアクエリ-2つの幅の間
CSS3メディアクエリを使用して、幅が400pxより大きく900pxより小さい場合にのみ表示されるクラスを作成しようとしています。これはおそらく非常に単純で、明らかなものがないのはわかっていますが、理解できません。私が思いついたのは以下のコードです、どんな助けにも感謝します。 @media (max-width:400px) and (min-width:900px) { .class { display: none; } }
141 css  media-queries 
11
iPhone 5 CSSメディアクエリ
iPhone 5は画面が長く、私のウェブサイトのモバイルビューを捉えていません。iPhone 5の新しいレスポンシブデザインクエリとは何ですか？既存のiPhoneクエリと組み合わせることができますか？ 私の現在のメディアクエリはこれです： @media only screen and (max-device-width: 480px) {}
11
JavaScriptでデバイスの幅を取得する
JavaScriptを使用して、ビューポートの幅ではなく、ユーザーのデバイスの幅を取得する方法はありますか？ CSSメディアクエリはこれを提供します。 @media screen and (max-width:640px) { /* ... */ } そして @media screen and (max-device-width:960px) { /* ... */ } これは、スマートフォンを横向きでターゲットにしている場合に役立ちます。たとえば、iOSでは、宣言は max-width:640pxiPhone 4でも横向きと縦向きの両方をターゲットにします。Androidの場合、私が知る限り、これは当てはまりません。したがって、このインスタンスでdevice-widthを使用すると、両方の向きを正しくターゲットにできます。デスクトップデバイスを対象としない。 ただし、デバイスの幅に基づいてjavascriptバインディングを呼び出す場合、ビューポートの幅のテストに制限されているようです。これは、次のような追加のテストを意味します。 if ($(window).width() <= 960 && $(window).height <= 640) { /* ... */ } デバイスの幅がcssで利用可能であるというヒントを考えると、これは私にはエレガントに思えません。
7
CSS3メディアクエリでのSass変数の使用
次のように、Sass変数の使用と@mediaクエリを組み合わせようとしています。 $base_width:1160px; @media screen and (max-width: 1170px) {$base_width: 960px;} @media screen and (min-width: 1171px) {$base_width: 1160px;} $base_width 次に、スタイルシートの幅の割合ベースの測定のさまざまなポイントでを定義して、流動的なレイアウトを作成します。 これを行うと、変数は正しく認識されているように見えますが、メディアクエリの条件は正しくありません。たとえば、上記のコードは、画面の幅に関係なく1160pxのレイアウトを生成します。@mediaステートメントを次のようにフリップフロップすると： @media screen and (min-width: 1171px) {$base_width: 1160px;} @media screen and (max-width: 1170px) {$base_width: 960px;} 画面幅に関係なく、960pxのレイアウトが生成されます。また、最初の行を削除する$base_width: 1160px;と、未定義の変数に対してエラーが返されることにも注意してください。私が見逃しているアイデアはありますか？
3
Retinaディスプレイ、高解像度の背景画像
これはばかげた質問のように聞こえるかもしれません。 このCSSスニペットを通常の表示に使用する場合（box-bg.png200px x 200pxです）。 .box{ background:url('images/box-bg.png') no-repeat top left; width:200px; height:200px } このようなメディアクエリを使用してRetinaディスプレイをターゲットにすると（@ 2x画像が高解像度バージョンになります）; @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .box{background:url('images/box-bg@2x.png') no-repeat top left;} } .box新しい高解像度の背景画像と一致させるために、div のサイズを400px x 400px に2倍にする必要がありますか？
6
Chromeデバイスモードのエミュレーションメディアクエリが機能しない
何らかの理由で、デバイスエミュレーションモードがメディアクエリを読み取っていません。ブートストラップで作成した自分のサイトを含む他のサイトでは機能しますが、最初から使用しているメディアクエリでは機能しません（メディアクエリボタンをクリックするとボタンが青色に変わりますが、メディアクエリは表示されません）。以下のテストファイル。これはChromeのバグですか、それともファイルに変更が必要なものがありますか？ <!DOCTYPE html> <!-- Media Queries Example 1 Sam Scott, Fall 2014 --> <html> <head> <title>MQ Example 1</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family: sans-serif; } h1 { color: red; } h2 { color:blue; } p { color:green; } @media (max-width: 768px) and (min-width: 481px) { …
12
ブートストラップ-画面サイズが小さい場合のパディングまたはマージンの削除
編集： 画面が480px幅未満に縮小されたときに、どのセレクターがサイドパディングを設定するかを尋ねる必要がありますか？私はこれを見つけるためにしばらくbootstrap-responsiveness.cssを閲覧してきましたが、これに影響を与えるものは何もないようです。 オリジナル 私は基本的に、小さなデバイス画面での応答性のために設定されたデフォルトのパディングまたはマージンを削除したいと思います。 私がしているbackground colorに上書きcontainer-fluidセレクタと大画面のために、彼らは幅にわたって完全に100％をレンダリングするが、それらの画面が小さいサイズに縮小され、デフォルトでは、ブートストラップは、上のマージンやパディングを追加しているようですcontainer-fluidかcontainer。 <div class="container-fluid"> <div class="row-fluid"> test </div> </div> カスタムcssを使用してBootstrapのデフォルトのスタイルを上書きする場合、小さい画面でこのパディングを削除するには、どのメディアクエリまたはセレクターに上書きする必要がありますか？
3
CSSメディアクエリの重複のルールは何ですか？
重複を避けるために、メディアクエリの間隔を正確に設定するにはどうすればよいですか？ たとえば、コードを検討すると、次のようになります。 @media (max-width: 20em) { /* for narrow viewport */ } @media (min-width: 20em) and (max-width: 45em) { /* slightly wider viewport */ } @media (min-width: 45em) { /* everything else */ } サポートされているすべてのブラウザーで、正確に20emと45emで何が起こりますか？ 私は人々が使用するのを見てきました：799px、次に800pxのようなものですが、799.5pxの画面幅はどうですか？（明らかに、通常のディスプレイではなく、網膜のディスプレイですか？） スペックを考えれば、ここでの答えが一番気になります。
6
Sassを使用してメディアクエリ内からセレクターを拡張する
itemクラスとコンパクトな「修飾子」クラスがあります。 .item { ... } .item.compact { /* styles to make .item smaller */ } これで結構です。ただし、画面が十分に小さい場合にクラスを@media強制的.itemにコンパクトにするクエリを追加したいと思います。 最初に考えたとき、これは私がやろうとしたことです： .item { ... } .item.compact { ... } @media (max-width: 600px) { .item { @extend .item.compact; } } ただし、これにより次のエラーが発生します。 @media内から外部セレクターを@extendすることはできません。同じディレクティブ内でのみ@extendセレクターを使用できます。 スタイルをコピー/貼り付けすることなく、SASSを使用してこれをどのように達成しますか？
12
CSSメディアクエリ-ソフトキーボードがCSSの向きのルールを破る-代替ソリューション？
私は複数のタブレットデバイスを使用しています-両方ともAndroid およびiOS。現在、すべてのタブレットで次の解像度のバリエーションがあります。 1280 x 800 1280 x 768 1024 x 768（iPadはもちろん） -iPadにはこの問題はありません デバイスの向きに基づくスタイルを適用する最も簡単な方法は、次の構文を使用してメディアクエリの向きを使用することです。 @media all and (orientation:portrait) { /* My portrait based CSS here */ } @media all and (orientation:landscape) { /* My landscape based CSS here */ } これは、すべてのタブレットデバイスで完全に正常に機能します。しかし、問題は、デバイスがポートレートモードで、ユーザーが任意の入力フィールド（検索など）をタップすると、ソフトキーボードがポップアップすることです。これにより、Webページの表示領域が縮小され、ランドスケープベースのCSSでレンダリングされます。Androidタブレットデバイスでは、キーボードの高さに依存します。したがって、最終的にWebページは壊れているように見えます。したがって、CSS3のオリエンテーションメディアクエリを使用して、オリエンテーションに基づいてスタイルを適用することはできません（ターゲットのオリエンテーションに適したメディアクエリがない限り）。これは、これをエミュレートするフィドルhttp://jsfiddle.net/hossain/S5nYP/5/です-デバイステストには、完全なテストページを使用してください-http：//jsfiddle.net/S5nYP/embedded/result/ これは、デモページから取得した動作のスクリーンショットです。 したがって、この問題に取り組むための代替手段はありますか？ネイティブのCSSベースのソリューションが機能しない場合は、JavaScriptベースのソリューションを利用できます。 http://davidbcalhoun.com/2010/dealing-with-device-orientationで、それに基づいてクラスとターゲットを追加することを提案するスニペットを見つけました。例えば： <html class="landscape"> <body> <h1 class="landscape-only">Element Heading - …
3
max-device-widthまたはmax-widthを使用する必要がありますか？
CSSメディアクエリを使用max-device-widthすると、デバイス幅（iPhoneやAndroidデバイスなど）やmax-widthページ幅をターゲットにするために使用できます。 を使用する場合max-device-width、デスクトップのブラウザウィンドウのサイズを変更しても、デスクトップのサイズは変更されないため、CSSは変更されません。 を使用する場合max-width、デスクトップのブラウザウィンドウのサイズを変更すると、タッチ操作に適した要素やメニューなど、モバイル指向のスタイルが表示される場合があります。 特定のブラウザ（およびデバイス？）をターゲットにすることは非推奨になり、ターゲットするものにもう少し注意を払う必要があります。それはメディアクエリにも当てはまりますか？ なぜあなたはお互いをターゲットにするのですか？どれがお勧めですか？ これは、本番Webサイトで使用するメディアクエリの例です。 @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-device-height: 480px) and (max-device-height: 640px) { /* Change a menu to fit the screen better, etc... */ } 私はとの両方を使用する傾向がmax-device-widthありmax-widthます。
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.