我找不到任何解释为什么我的媒体查询无法在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
感谢您的帮助
答案 0 :(得分:1)
使用此记录试试?或等同的。
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
通常我会写:
@media screen and (max-height: 26.375em){}
没有问题。