为什么Chrome(v.51.0.2704.106 m)忽略" @meda all和(max-width:849)?

时间:2016-07-28 09:58:31

标签: html css google-chrome

我找不到任何解释为什么我的媒体查询无法在Chrome中使用。它在Firefox和Safari中按预期工作,但在Chrome中,noe媒体查询正在运行。

这就是我在html中链接它的方式。我也尝试过没有媒体="所有"但它没有用。

<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<link rel="stylesheet" type="text/css" 
href="/webresources/css/styles~2016-07-28-09-01-05-000~cache.css"
media="all">

</head>
<body>

</body></html>

我的sass / scss看起来像这样,我在使用gulp任务转换为css时没有收到错误。

@media all and (max-width: 1200px) {

}

@media all and (max-width: 849px) {

}

奇怪的是,第一个媒体查询被使用,但第二个媒体查询应该覆盖第一个,不会被使用。

This is the style which is used on width: 800px

如果缺少某些代码,我也查看了源代码,但所有媒体查询都在那里。

Here i found the idea of problems with link and media query, but this didn't help

感谢您的帮助

1 个答案:

答案 0 :(得分:1)

使用此记录试试?或等同的。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

通常我会写:

@media screen and (max-height: 26.375em){}

没有问题。