All geek questions in one place

Responsive media request does not work in Google Chrome

I wrote a piece of CSS code to smoothly switch the width of the layout of my site depending on the width of the user's screen. If the user has less than the available state of the screen, the breadth of the layout increases to fill most of the window and leave less free space, and if he has more space, the layout is reduced to maintain an attractive appearance.

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 great in Firefox 30, however Google Chrome always displays an element with a width of 70%.

Earlier, I also used max-width in queries, in which case Chrome did the opposite; it will always display the element 90%, no matter how I resize the browser window.

SASS. ? ?

- .

+10
7

<head>

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

, :

@media screen and (min-width: 112rem){ ... }
+1
<!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

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

, Chech this

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

@media ( : 320 ) {...}

/*==========  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

please close your code with ';' and try it

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

In my case, press Ctrl + 0 to resize the viewport to normal, and everything is fine. I met the same question and tried all the methods above, but my problem is not in the code. Just my chrome viewport size is 80%.

0
source

Source: https://habr.com/ru/post/1545505/

More articles:


All Articles