响应式媒体查询在 Google Chrome 中不起作用答案

【问题标题】：Responsive media query not working in Google Chrome响应式媒体查询在 Google Chrome 中不起作用
【发布时间】：2014-08-12 06:15:42
【问题描述】：

我编写了一段 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 中运行良好，但谷歌浏览器总是以 70% 的宽度显示元素。

以前，我也在查询中使用了 max-width，在这种情况下 Chrome 会做相反的事情；无论我如何调整浏览器窗口的大小，它都会始终以 90% 的比例显示元素。

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

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

【问题讨论】：

能否请您显示 DOM 结构的摘录？你看过编译后的 CSS 是否有效？
@try-catch-finally 我不确定如何制作网站结构的独立示例，因为它有点复杂，但我已经添加了指向相关网站的链接。此外，您看到的代码是编译后的 CSS。

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

【解决方案1】：

我的问题是我试图使用@media (width > x) 风格的媒体查询，而不是@media (min-width: x)。 Firefox 正确处理了媒体查询，但 Chrome 忽略了它。

【讨论】：

【解决方案2】：

我遇到了 chrome 的问题，一旦我们越过假设受到影响的像素，它就会加载 css，添加十进制值解决了我的问题。

@media (max-width: 767.98px){...}

在 bootstrap 4 css 中也是如此。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

试试这个，和哈桑的回复差不多，加minimum-scale=1

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

【讨论】：

【解决方案5】：

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

【讨论】：

这不是真的，缩放选项仅适用于浏览器窗口，不适用于网站内容。
@Dexter 我从来没有说过缩放选项适用于网站内容。
对我有帮助。当缩放不是 100% 时，此百分比将应用于媒体查询。例如，缩放级别为 90% 的 @media (min-width: 768px) 仅应用于 691 像素 (768*0.90)。
是的，省了很多时间！！
必须在定义 CSS 媒体查询之前声明视口。我在标题下面有我的，但没有帮助。

【解决方案6】：

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

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

【讨论】：

对我来说是

【解决方案7】：

请用“;”关闭您的代码试试这个

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

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

在<head>中添加这一行

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

【讨论】：

这对桌面浏览器没有任何影响。
你能把你网站的链接发给我吗
这个问题是 3 年前发布的。我很确定现在他们要么解决了这个问题，要么放弃了这个项目。还有是问题中的网站链接。
是的，“视口”元标记！当我的模板由于某种原因缺少“viewport”标签时，我花了一个小时对完美的媒体查询进行故障排除。
您能解释一下为什么这可以解决问题吗？如果我们知道为什么会这样，这个答案会更有用。

【解决方案10】：

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

        }

【讨论】：

【解决方案11】：

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

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

【讨论】：

感谢更正确的语法，但这并不能解决 Chrome 上的问题。
刚刚注意到您添加了一个链接。对我来说，这些媒体查询在 Chrome (Mac) 中运行良好。