Responsive media query not working in Google Chrom

I have written a piece of CSS code to fluidly switch my site layout's width based on the user's screen width. If the user has less screen estate available, the layout's width increases to fill more of the window and leave less whitespace, and if they have more space, the layout shrinks to maintain an appealing look.

I use the following code to achieve this:

#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%
    }

}

This works just fine in Firefox 30, however Google Chrome always displays the element at 70% width.

Previously, I had also used max-width in the queries, in which case Chrome would do the inverse thing; it would always display the element at 90%, no matter how much I resize the browser window.

The rules are compiled using SASS. What exactly is the problem here? How can I alter the query to work in all browsers?

The affected website can be found at this link.

标签： css google-chrome firefox width media-queries

6条回答

【Aperson】

2楼-- · 2019-06-16 04:16

please close your code with ';' and try this

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

0人赞添加讨论(0) 举报

爷的心禁止访问

3楼-- · 2019-06-16 04:18

You can tweak this to your needs

// css for mobile here
// ...

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

And don't forget

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

0人赞添加讨论(0) 举报

手持菜刀，她持情操

4楼-- · 2019-06-16 04:25

add this line in <head>

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

0人赞添加讨论(0) 举报

Melony?

5楼-- · 2019-06-16 04:27

All are correct, but Chech this

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

NOT

@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人赞添加讨论(0) 举报

在下西门庆

6楼-- · 2019-06-16 04:31

See if this more usual syntax works better:

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

0人赞添加讨论(0) 举报

仙女界的扛把子

7楼-- · 2019-06-16 04:32

<!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>

0人赞添加讨论(0) 举报

Responsive media query not working in Google Chrom

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间