@mediaクエリーIE、Firefox、およびEdgeで動作しますが、Chromeでは動作しません

画面の幅が一定のポイントを下回るとdivの（この例では#example）パディングを縮小するメディアクエリを作成しました。以下の例を参照してください。@mediaクエリーIE、Firefox、およびEdgeで動作しますが、Chromeでは動作しません

@media screen and (max-width: 733px) { 
#example { 
    padding-left: 90px; 
    } 
}

このクエリは、IE 11、Firefox Quantum、およびEdgeで完全に機能します。しかし、私がChromeでテストすると、クエリがそこにいなくても同じ結果になります。

いくつかの研究を行った後、私は私のHTMLヘッダにビューポートのエントリのわずかな変化を追加した、と現時点で<head></head>の私のエントリは次のとおりです。

（私も使用している

<meta name="viewport" content="width=device-width" />

「幅=、デバイスに

最後に、@media screenの代わりに@media only screenを試してみましたが、これもうまくいきませんでした。

いくつかの最終的な詳細については、私のhtmlファイルは違いがあれば（これはwebapp用です）、VS2017コミュニティデバッガを使ってテストしています。

ありがとうございました！

出典

2017-12-27 pi905

あなたCSSにこれを追加してみてください：HTMLドキュメントの<head>セクションに

@media screen and (max-width:733px), 
    only screen and (-webkit-min-device-pixel-ratio: 2), 
    only screen and (-moz-device-pixel-ratio: 2), 
    only screen and (-o-min-device-pixel-ratio: 2/1), 
    only screen and (min-device-pixel-ratio: 2), 
    only screen and (min-resolution: 192dpi), 
    only screen and (min-resolution: 2dppx) 
    { 
     #example 
     { 
      padding-left: 90px; 
     } 
    }

と、この：正しいコード以下は

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />

このコードはテストされ、働くそれがうまく動作しない場合は、コードのどこかに問題がある可能性があります。CSSその場合は、サイトへのリンクを投稿するか、いくつかのコードを追加してください。好ましくはCSSです。

出典

2017-12-27 20:51:08 Ivan86

あなたのコードにブレース "}"がありません。

@media screen and (max-width: 733px) { 
#example { 
    padding-left: 90px; 
} 
}

出典

2017-12-27 20:49:50

ありがとうございます。私は誤って私の質問のためのより一般的にするためのサンプルコードを編集するときに大括弧を省いた。私は質問を編集し、実際のコードをチェックして、括弧の誤りがないことを確認しました。 – pi905

@mediaクエリーIE、Firefox、およびEdgeで動作しますが、Chromeでは動作しません

答えて

関連する問題