CSS3メディアクエリが機能しないのはなぜですか？

styles.cssでは、メディアクエリを使用しています。どちらも次のバリエーションを使用しています。

/*--[ Normal CSS styles ]----------------------------------*/

@media only screen and (max-width: 767px) {

    /*--[ Mobile styles go here]---------------------------*/
}

サイトを縮小すると、通常のブラウザー（Safari、Firefox）で必要なレイアウトにサイトのサイズが変更されますが、携帯電話ではモバイルレイアウトがまったく表示されません。代わりに、デフォルトのCSSが表示されます。

誰かが私を正しい方向に向けることができますか？

これら3つはすべて役立つヒントでしたが、メタタグを追加する必要があるようです。

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

Android（2.2）とiPhoneの両方で問題なく動作するようです...

メディアクエリの上に標準のcss宣言があることを忘れないでください。そうしないと、クエリも機能しません。

.edcar_letter{
    font-size:180px;
}

@media screen and (max-width: 350px) {
    .edcar_letter{
        font-size:120px;
    }
}

キーワードonlyが問題になっているのではないかと思います。次のようなメディアクエリを使用しても問題はありません。

@media screen and (max-width: 480px) { }

プレスサイトでブートストラップを使用しましたが、IE8では機能しません。css3-mediaqueries.jsJavaScriptを使用しましたが、まだ機能しません。メディアクエリでこのJavaScriptファイルを使用する場合は、CSSのメディアクエリ行に画面を追加します。

ここに例があります：

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


<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>

css上記の行と同じくらい簡単なリンク行。

今日も同じような状況でした。メディアクエリが機能しませんでした。しばらくすると、「and」の後のスペースがなくなっていました。適切なメディアクエリは次のようになります。

@media screen and (max-width: 1024px) {}

CSSコードの順番も重要です。次に例を示します。

@media(max-width:600px){
  .example-text{
     color:red;
   }
}
.example-text{
   color:blue;
}

上記のコードは、注文が実行されるため機能しません。次のように書く必要があります：

.example-text{
   color:blue;
}
@media(max-width:600px){
  .example-text{
     color:red;
   }
}

pxやremなどの単位では、常に最大幅と最小幅について言及します。これは私にとってそれを理解しました。単位なしで数値のみを入力すると、ブラウザがメディアクエリを読み取ることができません。例： これは間違った @media only screen and（max-width：950）で、 これは正しい @media only screen and（max-width：950px）

リングに別の答えを投げます。CSS変数を使用しようとすると、静かに失敗します。

@media screen and (max-device-width: var(--breakpoint-small)) {}

CSS変数は、メディアクエリでは機能しません（仕様）。

私が今まで見たことがない奇妙な理由：（Firefox 69で）メディアクエリの外で「親>子」セレクターを使用している場合、メディアクエリが壊れる可能性があります。これがなぜ起こるかはわかりませんが、私のシナリオではこれはうまくいきませんでした...

@media whatever {
    #child { display: none; }
}

しかし、ページのさらに上の他のCSSと一致するように親を追加すると、これは機能します...

#parent > #child { display: none; }

idは非常に具体的であり、あいまいさがあってはならないため、親を指定することは重要ではないようです。多分それはFirefoxのバグですか？

OPのコードスニペットは、正しいコメントマークアップを明確に使用していますが、CSSは段階的に中断する可能性があります。そのため、構文エラーがある場合、その後のすべてが失敗する可能性があります。私は何度か、自分のスタイルシートを壊す不正なコメントマークアップを提供する信頼できるソースに依存していました。OPはコードのごく一部を提供しただけなので、以下をお勧めします。

必ず、すべてのCSSのコメントは、このマークアップを使用してください/*... */- MDNによるCSSの正しいコメントマークアップであります

リンターまたは安全なオンライン検証ツールを使用してCSSを検証します。これはW3によるものです

詳細：ブートストラップ4からの最新の推奨メディアクエリブレークポイントを確認しに行ったところ、ボイラープレートをドキュメントから直接コピーしてしまいました。ほとんどすべてのコードブロックにjavascriptスタイルのコメントが付けられて//いたため、コードが破損し、トラブルシューティングに必要な不可解なコンパイルエラーのみが表示されました。

IntelliJテキストエディターでは、ctrl + /ホットキーを使用してLESSファイル内のcssの特定の行をコメント化することができました。これは、認識されないファイルタイプにデフォルトで挿入//されることを除いて、すばらしいものでした。それはフリーウェアではなく、かなり主流ではないので、私はそれを信頼してそれと一緒に行きました。それは私のコードを壊しました。各ファイルタイプに正しいコメントマークアップを教えるための設定メニューがあります。

以下のようなメタタグを含めると、ブラウザがビューポートのズームを異なる方法で処理する可能性があります。

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

私も最近この問題に遭遇し、後でandとの間にスペースを入れなかったことが原因であることがわかりました(。これはエラーでした

@media screen and(max-width:768px){
}

次に、これを修正するために変更しました

@media screen and (max-width:768px){
}

私はいくつかの方法を使います。同じスタイルシートで使用します：@media（最大幅：450px）、または個別にヘッダーにリンクが正しく設定されていることを確認してください。私はあなたのfixmeupを見ました、そしてあなたはcssへのリンクの混乱している配列を持っています。HTC欲望Sにもおっしゃる通りの働きをします。

@media all and (max-width:320px)and(min-width:0px) {
  #container {
    width: 100%;
  }
  sty {
    height: 50%;
    width: 100%;
    text-align: center;
    margin: 0;
  }
}

.username {
  margin-bottom: 20px;
  margin-top: 10px;
}

私のmax-height代わりに私は示していましたmax-width。

それがあなたなら、変更してください！

    @media screen and (max-width: 350px) {    // Not max-height
        .letter{
            font-size:20px;
        }
    }

また、ブラウザのズームレベルが正しくない場合にも発生することがあります。ブラウザウィンドウのズームは100％にする必要があります。ChromeではCtrl + 0、ズームレベルをリセットするために使用します。