BinaryDevelop
  1. ホーム
  2. css

[解決済み】Google Chromeでレスポンシブメディアクエリが機能しない件

2022-02-20 15:52:06

質問

ユーザーの画面幅に応じて、サイトのレイアウトの幅を流動的に切り替えるCSSコードを書きました。ユーザーの画面占有率が低い場合は、レイアウトの幅を大きくしてウィンドウの多くを埋め、空白を少なくし、スペースに余裕がある場合は、レイアウトを縮小して魅力的な外観を維持します。

私はこれを実現するために、以下のようなコードを使っています。 

#bg{
    background:-webkit-linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
    background:-moz-linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
    background:-o-linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
    background:linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
    margin-left:auto;
    margin-right:auto;
    margin-bottom:1.6rem;
    border-width:0 0.1rem 0.1rem 0.1rem;
    border-style:solid;
    border-color:#303030 #101010 #000;
    border-radius:0.8rem;
    min-width:94.2rem
}

@media (min-width: 70rem){
    #bg{
        border-radius:4px;
        border-radius:0.4rem;
        width:90%
    }

}

@media (min-width: 91rem){
    #bg{
        width:80%
    }

}

@media (min-width: 112rem){
    #bg{
        width:70%
    }

}

Firefox 30では問題なく動作しますが、Google Chromeでは 常に は70%の幅で表示されます。

以前は 最大幅 この場合、Chrome は逆の動作をします。ブラウザのウィンドウサイズをどれだけ変更しても、要素は常に 90% で表示されます。

ルールはSASSを使用してコンパイルされています。この問題はいったい何なのでしょうか？どうすればすべてのブラウザで動作するようにクエリーを変更できますか？

影響を受けるウェブサイトは、以下の通りです。 このリンクから .

解決方法は？

に次の行を追加してください。 <head> 

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

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します