web-dev-qa-db-ja.com

間違った幅で起動するメディアクエリ

レスポンシブページを作成していますが、メディアクエリが間違った幅サイズで起動しています。 Chromeを使用しています。

@media screen and (max-width: 1200px) {
 .logo-pic {
    display: none;
}
}

たとえば、このルールは、間違ったサイズで起動するだけで機能します。このルールは1200pxではなく1320pxで起動します。 HTMLのメタタグが用意されています。メディアクエリを通常よりも100ピクセルほど広く発射しているようです。

<meta name="viewport" content="width=device-width, initial-scale=1">

作成した以前のレスポンシブサイトを確認しましたが、これらのブレークポイントは正しく起動しています。さまざまなWebサイトでブラウザーをテストしましたが、メディアクエリも問題ありません。

スタックオーバーフローに関する同様の質問を見つけましたが、回答はありませんでした。

間違った値でのメディアクエリブレークポイント

問題がわからない？

htmlcssmedia-queriesmeta-tags
48
swollavg

これが発生する一般的な理由は、ブラウザウィンドウを100％以外のサイズにズームした場合です。ブラウザで、ドロップダウンメニューの[表示]を選択し、100％に設定されていることを確認します。ズームインまたはズームアウトすると、メディアクエリが不適切にトリガーされます。

恥ずかしさを心配する必要はありません。それはおそらく起こりました、または誰にでも起こります。しかし、一度だけ。

この問題をすべて回避するには、相対単位（emではなくremまたはpx）を使用してメディアクエリを定義することを検討する必要があります。

JavaScriptを使用して、ページの読み込み時にブラウザのズームレベルを100％に設定することもできます。

document.body.style.webkitTransform =  'scale(1)';
document.body.style.msTransform =   'scale(100)';
document.body.style.transform = 'scale(1)';
document.body.style.zoom = screen.logicalXDPI / screen.deviceXDPI;
156
davidcondrey

ここに答えが示されていても、他の人がそれ以上検索できないようにするための短い追加です。

私のズームは既に100％に設定されていましたが、それでも問題はありました。同じことを経験している場合、答えは簡単です。ズームを90％に設定し、100％に戻します。

5
Pieter

メディアクエリで同じCSSシートを読み込むiframe（またはモーダルまたは小さなウィンドウ）がありますか？その場合、それはキャッシュの問題であり、CSSファイルを次のようなダムパラメータとリンクする必要があります。

<link href="myCss.css?iframe=1" />

キャッシュされたバージョンを取得する代わりにcssファイルを新しいファイルとしてロードするには...

2
Pouki

別の追加。 1時間のデバッグの後、複数のメディアクエリをコーディングしたことに気付きました。cssファイルは上から下に実行されるため、以前のメディアクエリロジックをオーバーライドしていました。例：

@media (max-width: 700px) {
 .some-class { background-color: red; }
};

// This will override the above styling (assuming max-width logic is true)
@media (max-width: 800px) {
 .some-class { background-color: yellow; }
};
1
Amir

1時間のフラストレーションの後、私はこのスレッドに行き着きました。結局、誤ってmin-widthではなくmin-heightを使用していたことに気付きました。

@media screen and (min-height: $sm) { }

の代わりに...

@media screen and (min-width: $sm) { }

あなたが私と同じ問題を抱えていた場合、すぐに確認することを忘れないでくださいface Palm、遅れています。

0
AdheneManx

あなたのユニットを見てください：rem、em、px。

この問題が発生したのは、ベースのフォントサイズが10pxであり、メディアクエリにmax_width: 102.4remを挿入したためですが、予想される1024pxではなく、約1600pxでアクティブになります。

私の102.4emで1600pxでアクティブになりますが、1024pxを使用すると期待どおりに動作します。

ここに私がほのめかしているすべてのことについて話す記事があります：

https://zellwk.com/blog/media-query-units/

remではなくpxを使用して問題が発生したため、最初は上位の回答を逃しました。明らかに、問題の根本はユニットにあるように見えます。

0
agm1984