Question

我编写了一段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％的宽度显示元素。

以前，我在查询中也使用了 max-width ，在这种情况下，Chrome会做相反的事情;无论我调整浏览器窗口的大小，它总是以90％显示元素。

使用SASS编译规则。究竟是什么问题？如何更改查询以在所有浏览器中工作？

可以找到受影响的网站at this link。

Answer 1

在<head>

中添加此行

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

Answer 2

看看这种更常用的语法是否更好：

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

Answer 3

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

Answer 4

如果您在桌面上使用Chrome（或任何浏览器），则浏览器缩放比例应为100％。不多或不少。否则，响应式将不起作用（在 Windows 中使用Ctrl +滚动，或者在 Mac 中使用Cmd +/-进行调整）。

Answer 5

一切都是正确的，但是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) {

        }

Answer 6

请使用“;”关闭代码并尝试这个

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

Answer 7

您可以根据自己的需要进行调整

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

Answer 8

尝试一下，这与Hassan的回复类似，只需添加minimum-scale=1

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

Answer 9

正如上面其他人所说，在桌面上，您需要检查缩放是否设置为 100% 并使用视口元标记

响应式媒体查询无法在Google Chrome中使用

9 个答案: