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

Question

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

ivi*_*yon 11 css firefox google-chrome width media-queries

我写了一段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%
    }

}

Run Code Online (Sandbox Code Playgroud)

这在Firefox 30中运行得很好,但Google Chrome 总是以70%的宽度显示元素.

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

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

可以在此链接中找到受影响的网站.

Answer 1

Has*_*aza 35

添加此行 <head>

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

Run Code Online (Sandbox Code Playgroud)

是的，“视口”元标记！当由于某种原因我的模板缺少“视口”标签时，我花了一个小时对完美媒体查询进行故障排除。 (3认同)
这对桌面浏览器没有任何影响。 (2认同)
您能解释一下为什么这可以解决问题吗？如果我们知道为什么会这样，这个答案会更有用。 (2认同)

Answer 2

Pla*_*mer 8

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

Answer 3

Bak*_*alf 6

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

// css for mobile here
// ...

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

Run Code Online (Sandbox Code Playgroud)

并且不要忘记

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，2 月前
查看次数：	29187 次
最近记录：	5 年，11 月前