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

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

3
CSSメディアクエリ：max-width OR max-height
CSSメディアクエリを記述する場合、「OR」ロジックで複数の条件を指定する方法はありますか？ 私はこのようなことをやろうとしています： /* This doesn't work */ @media screen and (max-width: 995px OR max-height: 700px) { ... }
490 css  media-queries 
5
メディアクエリの「画面」と「画面のみ」の違いは何ですか？
メディアクエリscreenとの違いは何only screenですか？ <link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> <link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> なぜ使用する必要があるのonly screenですか？screenそれ自体は、画面だけにレンダリングされるのに十分な情報を提供していませんか？ 私はこれら3つの異なる方法のいずれかを使用する多くのレスポンシブWebサイトを見てきました。 @media screen and (max-width:632px) @media (max-width:632px) @media only screen and (max-width:632px)
487 css  media-queries 
15
メディアクエリ：デスクトップ、タブレット、モバイルをターゲットに設定するにはどうすればよいですか？
メディアクエリの調査を行っていますが、特定のサイズのデバイスをターゲットにする方法がまだわかりません。 デスクトップ、タブレット、モバイルをターゲットにしたい。多少の不一致があることは承知していますが、これらのデバイスをターゲットにするために使用できる汎用システムがあればよいでしょう。 私が見つけたいくつかの例： # Mobile only screen and (min-width: 480px) # Tablet only screen and (min-width: 768px) # Desktop only screen and (min-width: 992px) # Huge only screen and (min-width: 1280px) または： # Phone only screen and (max-width:320px) # Tablet only screen and (min-width:321px) and (max-width:768px) # Desktop only screen …
11
メディアクエリは、画面ではなくdiv要素に基づいてサイズ変更できますか？
メディアクエリを使用して、div要素が含まれている要素のサイズに基づいて要素のサイズを変更したいと思います。画面サイズdivは、Webページ内のウィジェットのように使用されるだけで、サイズが異なるため、使用できません。 更新 これで現在行われている作業があるようです：https : //github.com/ResponsiveImagesCG/cq-demos
317 css  media-queries 
12
CSS @mediaルールをインラインで配置することは可能ですか？
バナー画像をHTML5アプリに動的に読み込む必要があり、画面の幅に合わせていくつかの異なるバージョンが必要です。電話の画面幅を正確に決定できないため、これを行うには、divの背景画像を追加し、@ mediaを使用して画面幅を決定し、正しい画像を表示するしかありません。 例えば： <span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span> これは可能ですか、それとも誰か他の提案がありますか？
293 html  css  media-queries 
5
@メディアの最小幅と最大幅
私はこの@media設定をしています： HTML： <head> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head> CSS： @media screen and (min-width: 769px) { /* STYLES HERE */ } @media screen and (min-device-width: 481px) and (max-device-width: 768px) { /* STYLES HERE */ } @media only screen and (max-device-width: 480px) { /* STYLES HERE */ } この設定では、iPhoneでは機能しますが、ブラウザでは機能しません。 それは私がすでにdeviceメタに持っているからで、多分max-width:480px代わりに持っているからでしょうか？
3
@mediaメディアクエリとASP.NET MVCかみそり構文の衝突
Razorビューエンジンを使用してASP.NET MVCで実行する大規模なサイトを持っています。 サイト全体のすべての一般的なスタイリングを含む基本スタイルシートがあります。ただし、場合によっては、ページ固有のスタイル<head>があります。通常、これは1行または2行です。 私はCSSを<head>厳密に分離していないので特に好きではありませんが、1行または2行は、そのページに固有のものなので、別のファイルを添付して帯域幅を追加する必要はありません。 ページ固有のメディアクエリをに挿入したいの<head>ですが、メディアクエリが@記号と角かっこ{}を使用しているため、かみそりの構文と競合しています。 @section cphPageHead{ <style> /* PAGE SPECIFIC CSS */ ... @media only screen and (max-width : 960px) <-- the @ symbol here is clashing! { ... } } </style> } これを回避する方法はありますか？
17
$（window）.width（）はメディアクエリと同じではありません
プロジェクトでTwitter Bootstrapを使用しています。デフォルトのブートストラップスタイルだけでなく、独自のスタイルもいくつか追加しました //My styles @media (max-width: 767px) { //CSS here } また、ビューポートの幅が767px未満の場合、jQueryを使用してページ上の特定の要素の順序を変更しています。 $(document).load($(window).bind("resize", checkPosition)); function checkPosition() { if($(window).width() < 767) { $("#body-container .main-content").remove().insertBefore($("#body-container .left-sidebar")); } else { $("#body-container .main-content").remove().insertAfter($("#body-container .left-sidebar")); } } 私が抱えている問題は$(window).width()、CSSによって計算された幅とCSSによって計算された幅が同じではないように見えることです。とき$(window).width()、751のようにビューポートの幅がそれほどに16pxの異なるがあるように思わ戻っ767 CSSの計算。 これを引き起こしている原因と、私が問題を解決する方法を誰かが知っていますか？人々は、スクロールバーの幅は考慮に入れられておらず、使用$(window).innerWidth() < 751する方法が進むべき道であると示唆しています。ただし、理想的には、スクロールバーの幅を計算し、メディアクエリと一致するソリューション（たとえば、両方の条件が値767をチェックしている場合）を見つけたいと思います。確かに、すべてのブラウザのスクロールバーの幅が16pxになるわけではないのですか？
16
CSS3メディアクエリが機能しないのはなぜですか？
styles.cssでは、メディアクエリを使用しています。どちらも次のバリエーションを使用しています。 /*--[ Normal CSS styles ]----------------------------------*/ @media only screen and (max-width: 767px) { /*--[ Mobile styles go here]---------------------------*/ } サイトを縮小すると、通常のブラウザー（Safari、Firefox）で必要なレイアウトにサイトのサイズが変更されますが、携帯電話ではモバイルレイアウトがまったく表示されません。代わりに、デフォルトのCSSが表示されます。 誰かが私を正しい方向に向けることができますか？
11
CSS Media QueryのIE8サポート
IE8は次のCSSメディアクエリをサポートしていません。 @import url("desktop.css") screen and (min-width: 768px); そうでない場合、別の書き方は何ですか？Firefoxでも同じように機能します。 以下のコードに問題がありますか？ @import url("desktop.css") screen; @import url("ipad.css") only screen and (device-width:768px);
19
CSS @mediaのbackground-colorに関する問題。
私はこの会社の新人であり、CSSのマイルを使用する製品を持っています。アプリの印刷可能なスタイルシートを作成しようとしていますが、background-colorで問題が発生してい@media printます。 @media print { #header{display:none;} #adwrapper{display:none;} td { border-bottom: solid; border-right: solid; background-color: #c0c0c0; } } それ以外はすべて機能します。境界線などを変更できますがbackground-color、印刷には反映されません。これで、詳細がわからないと、質問に答えられない可能性があることを理解しています。誰かが以前にこの問題または同様の問題を抱えていたのかどうか知りたかっただけです。
176 css  media-queries 
10
ブートストラップ3ブレークポイントとメディアクエリ
上のブートストラップ3メディアクエリのドキュメントは言います： 以下のメディアクエリをLessファイルで使用して、グリッドシステムに主要なブレークポイントを作成します。 非常に小さなデバイス（電話、768px未満）：これはブートストラップのデフォルトであるため、メディアクエリはありません 小型デバイス（タブレット、768px以上）： @media (min-width: @screen-sm-min) { ... } 中型デバイス（デスクトップ、992px以上）： @media (min-width: @screen-md-min) { ... } 大型デバイス（大型デスクトップ、1200px以上）： @media (min-width: @screen-lg-min) { ... } 我々は使用することができるようになっている@screen-sm、@screen-mdと@screen-lgだけでなく、私たちのメディアクエリでの名前？それは私には効かないからです。@media (min-width: 768px) {...}動作する前などにピクセル測定を使用する必要があります。私は何か間違ったことをしていますか？ また、超小型デバイスの480pxへの参照はタイプミスですか？それは767pxまでと言うべきではありませんか？（ドキュメントから削除されたため）
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.