web-dev-qa-db-ja.com

CSS：@mediaクエリの最大幅が機能しない

（他のブラウザでは動作しますが、クロムでは動作しません）

ブラウザのサイズが1400px未満の場合にのみスタイルを適用したい

max-width動作していません

@media only screen and (max-width:1400px)  {
.heading-left {
    left: -0.5%;
  }
}

min-widthその働き

@media only screen and (min-width:480px)  {
.heading-left {
    left: -0.5%;
   }
}

しかし、ブラウザーの幅が1400pxを超えると変更されます（それがどのように機能するかは知っていますが、max-widthは機能していません）

このためのフィドル

https://jsfiddle.net/j4Laddtk/

htmlcsshtml5css3media-queries
22
Divya Barsode

開発者ツールは、ビューポートのサイズは1400pxであると言っていましたが、CSSが考慮していた実際の幅は1400pxを超えていました。このため、メディアクエリは機能しません

0
Divya Barsode

ビューポートを追加しようとしましたか？

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

ワーキングJSFiddle

ビューポートは、レスポンシブページをレンダリングするときに使用されるため、主にモバイルWebサイトを処理するときに使用されますが、メディアクエリを処理するときは、CSSに実際のデバイス幅を伝えるのに役立ちます。

57
Stewartside

この方法を試してください。

これはデバイスに基づいてターゲットになります

@media screen 
 and (max-device-width: 1400px) 
 and (min-device-width: 480px) 
{ 
   .heading-left {
    left: -0.5%;
   }

}

ブラウザウィンドウ領域に基づいてターゲットにするには

@media screen 
 and (max-width: 1400px) 
 and (min-width: 480px) 
{ 
   .heading-left {
    left: -0.5%;
   }

}
10
Prime

ブラウザZOOM- edは100%レベルとは異なりますか？その場合は、100%にリセット（ズームインおよびズームアウト）してください。

7
T.Todua

これは私のために働いた

@media screen and (max-width: 700px) and (min-width: 400px) { 
    .heading-left { left: -0.5%; }
}
1
Pasquale Muscettola

開発者ツールは、ビューポートのサイズは1400pxであると言っていましたが、cssが考慮していた実際の幅は1400px以上でした。このため、メディアクエリは機能しません。

0
Divya Barsode
@media only screen and (max-width: 1000px) {
  /*Don't forget to add meta viewport in your html*/
}

動作しない場合は、ブラウザで要素を調べてネットワークをナビゲートし、無効なキャッシュを切り替えます。ブラウザキャッシュでは機能しない場合があります。

ハッピーコーディング

0
Md. A. Barik