web-dev-qa-db-ja.com

Googleでレスポンシブメディアクエリが機能しないChrome

ユーザーの画面の幅に基づいてサイトのレイアウトの幅を滑らかに切り替える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 Chromealwaysは要素を70％の幅で表示します。

以前は、クエリでmax-widthも使用していましたが、その場合Chromeは逆のことを行い、常に要素を表示しますブラウザウィンドウのサイズをどの程度変更しても、90％になります。

ルールはSASSを使用してコンパイルされます。ここの問題は正確には何ですか？すべてのブラウザで機能するようにクエリを変更するにはどうすればよいですか？

影響を受けるWebサイトは このリンクで です。

cssgoogle-chromefirefoxwidthmedia-queries
13
ividyon

この行を<head>に追加します

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

これを必要に応じて調整できます

// css for mobile here
// ...

/* desktop */
@media (min-width: 900px) and (orientation: landscape)
{
    // css for desktop here
    // ...
}

そして、忘れないでください

<meta name="viewport" content="width=device-width, initial-scale=1">
1
Baked Inhalf
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body{
            background:green;
        }
        @media only screen and (max-width: 500px) {
            body{
                background:yellow;
            }
        }
    </style>
</head>
<body>

</body>
</html>
1
Nikit Barochiya

このより一般的な構文がうまく機能するかどうかを確認します。

@media screen and (min-width: 112rem){ ... }
1
ralph.m

すべてが正しいですが、Chech this

@media only screen and (min-width : 320px) {...}

ない

@media screen and（min-width：320px）{...}

/*==========  Mobile First Method  ==========*/

        /* Custom, iPhone Retina */ 
        @media only screen and (min-width : 320px) {

        }

        /* Extra Small Devices, Phones */ 
        @media only screen and (min-width : 480px) {

        }

        /* Small Devices, Tablets */
        @media only screen and (min-width : 768px) {

        }

        /* Medium Devices, Desktops */
        @media only screen and (min-width : 992px) {

        }

        /* Large Devices, Wide Screens */
        @media only screen and (min-width : 1200px) {

        }



        /*==========  Non-Mobile First Method  ==========*/

        /* Large Devices, Wide Screens */
        @media only screen and (max-width : 1200px) {

        }

        /* Medium Devices, Desktops */
        @media only screen and (max-width : 992px) {

        }

        /* Small Devices, Tablets */
        @media only screen and (max-width : 768px) {

        }

        /* Extra Small Devices, Phones */ 
        @media only screen and (max-width : 480px) {

        }

        /* Custom, iPhone Retina */ 
        @media only screen and (max-width : 320px) {

        }
0
karthick nagarajan

';'でコードを閉じてくださいそしてこれを試してください

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